/ext-4.0.7/docs/source/Json.html

https://bitbucket.org/srogerf/javascript · HTML · 316 lines · 299 code · 17 blank · 0 comment · 0 complexity · a82d6ef8d5b66073d1e83d7ba498627c MD5 · raw file

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-data-reader-Json'>/**
  19. </span> * @author Ed Spencer
  20. * @class Ext.data.reader.Json
  21. * @extends Ext.data.reader.Reader
  22. *
  23. * &lt;p&gt;The JSON Reader is used by a Proxy to read a server response that is sent back in JSON format. This usually
  24. * happens as a result of loading a Store - for example we might create something like this:&lt;/p&gt;
  25. *
  26. &lt;pre&gt;&lt;code&gt;
  27. Ext.define('User', {
  28. extend: 'Ext.data.Model',
  29. fields: ['id', 'name', 'email']
  30. });
  31. var store = Ext.create('Ext.data.Store', {
  32. model: 'User',
  33. proxy: {
  34. type: 'ajax',
  35. url : 'users.json',
  36. reader: {
  37. type: 'json'
  38. }
  39. }
  40. });
  41. &lt;/code&gt;&lt;/pre&gt;
  42. *
  43. * &lt;p&gt;The example above creates a 'User' model. Models are explained in the {@link Ext.data.Model Model} docs if you're
  44. * not already familiar with them.&lt;/p&gt;
  45. *
  46. * &lt;p&gt;We created the simplest type of JSON Reader possible by simply telling our {@link Ext.data.Store Store}'s
  47. * {@link Ext.data.proxy.Proxy Proxy} that we want a JSON Reader. The Store automatically passes the configured model to the
  48. * Store, so it is as if we passed this instead:
  49. *
  50. &lt;pre&gt;&lt;code&gt;
  51. reader: {
  52. type : 'json',
  53. model: 'User'
  54. }
  55. &lt;/code&gt;&lt;/pre&gt;
  56. *
  57. * &lt;p&gt;The reader we set up is ready to read data from our server - at the moment it will accept a response like this:&lt;/p&gt;
  58. *
  59. &lt;pre&gt;&lt;code&gt;
  60. [
  61. {
  62. &quot;id&quot;: 1,
  63. &quot;name&quot;: &quot;Ed Spencer&quot;,
  64. &quot;email&quot;: &quot;ed@sencha.com&quot;
  65. },
  66. {
  67. &quot;id&quot;: 2,
  68. &quot;name&quot;: &quot;Abe Elias&quot;,
  69. &quot;email&quot;: &quot;abe@sencha.com&quot;
  70. }
  71. ]
  72. &lt;/code&gt;&lt;/pre&gt;
  73. *
  74. * &lt;p&gt;&lt;u&gt;Reading other JSON formats&lt;/u&gt;&lt;/p&gt;
  75. *
  76. * &lt;p&gt;If you already have your JSON format defined and it doesn't look quite like what we have above, you can usually
  77. * pass JsonReader a couple of configuration options to make it parse your format. For example, we can use the
  78. * {@link #root} configuration to parse data that comes back like this:&lt;/p&gt;
  79. *
  80. &lt;pre&gt;&lt;code&gt;
  81. {
  82. &quot;users&quot;: [
  83. {
  84. &quot;id&quot;: 1,
  85. &quot;name&quot;: &quot;Ed Spencer&quot;,
  86. &quot;email&quot;: &quot;ed@sencha.com&quot;
  87. },
  88. {
  89. &quot;id&quot;: 2,
  90. &quot;name&quot;: &quot;Abe Elias&quot;,
  91. &quot;email&quot;: &quot;abe@sencha.com&quot;
  92. }
  93. ]
  94. }
  95. &lt;/code&gt;&lt;/pre&gt;
  96. *
  97. * &lt;p&gt;To parse this we just pass in a {@link #root} configuration that matches the 'users' above:&lt;/p&gt;
  98. *
  99. &lt;pre&gt;&lt;code&gt;
  100. reader: {
  101. type: 'json',
  102. root: 'users'
  103. }
  104. &lt;/code&gt;&lt;/pre&gt;
  105. *
  106. * &lt;p&gt;Sometimes the JSON structure is even more complicated. Document databases like CouchDB often provide metadata
  107. * around each record inside a nested structure like this:&lt;/p&gt;
  108. *
  109. &lt;pre&gt;&lt;code&gt;
  110. {
  111. &quot;total&quot;: 122,
  112. &quot;offset&quot;: 0,
  113. &quot;users&quot;: [
  114. {
  115. &quot;id&quot;: &quot;ed-spencer-1&quot;,
  116. &quot;value&quot;: 1,
  117. &quot;user&quot;: {
  118. &quot;id&quot;: 1,
  119. &quot;name&quot;: &quot;Ed Spencer&quot;,
  120. &quot;email&quot;: &quot;ed@sencha.com&quot;
  121. }
  122. }
  123. ]
  124. }
  125. &lt;/code&gt;&lt;/pre&gt;
  126. *
  127. * &lt;p&gt;In the case above the record data is nested an additional level inside the &quot;users&quot; array as each &quot;user&quot; item has
  128. * additional metadata surrounding it ('id' and 'value' in this case). To parse data out of each &quot;user&quot; item in the
  129. * JSON above we need to specify the {@link #record} configuration like this:&lt;/p&gt;
  130. *
  131. &lt;pre&gt;&lt;code&gt;
  132. reader: {
  133. type : 'json',
  134. root : 'users',
  135. record: 'user'
  136. }
  137. &lt;/code&gt;&lt;/pre&gt;
  138. *
  139. * &lt;p&gt;&lt;u&gt;Response metadata&lt;/u&gt;&lt;/p&gt;
  140. *
  141. * &lt;p&gt;The server can return additional data in its response, such as the {@link #totalProperty total number of records}
  142. * and the {@link #successProperty success status of the response}. These are typically included in the JSON response
  143. * like this:&lt;/p&gt;
  144. *
  145. &lt;pre&gt;&lt;code&gt;
  146. {
  147. &quot;total&quot;: 100,
  148. &quot;success&quot;: true,
  149. &quot;users&quot;: [
  150. {
  151. &quot;id&quot;: 1,
  152. &quot;name&quot;: &quot;Ed Spencer&quot;,
  153. &quot;email&quot;: &quot;ed@sencha.com&quot;
  154. }
  155. ]
  156. }
  157. &lt;/code&gt;&lt;/pre&gt;
  158. *
  159. * &lt;p&gt;If these properties are present in the JSON response they can be parsed out by the JsonReader and used by the
  160. * Store that loaded it. We can set up the names of these properties by specifying a final pair of configuration
  161. * options:&lt;/p&gt;
  162. *
  163. &lt;pre&gt;&lt;code&gt;
  164. reader: {
  165. type : 'json',
  166. root : 'users',
  167. totalProperty : 'total',
  168. successProperty: 'success'
  169. }
  170. &lt;/code&gt;&lt;/pre&gt;
  171. *
  172. * &lt;p&gt;These final options are not necessary to make the Reader work, but can be useful when the server needs to report
  173. * an error or if it needs to indicate that there is a lot of data available of which only a subset is currently being
  174. * returned.&lt;/p&gt;
  175. */
  176. Ext.define('Ext.data.reader.Json', {
  177. extend: 'Ext.data.reader.Reader',
  178. alternateClassName: 'Ext.data.JsonReader',
  179. alias : 'reader.json',
  180. root: '',
  181. <span id='Ext-data-reader-Json-cfg-record'> /**
  182. </span> * @cfg {String} record The optional location within the JSON response that the record data itself can be found at.
  183. * See the JsonReader intro docs for more details. This is not often needed.
  184. */
  185. <span id='Ext-data-reader-Json-cfg-useSimpleAccessors'> /**
  186. </span> * @cfg {Boolean} useSimpleAccessors True to ensure that field names/mappings are treated as literals when
  187. * reading values. Defalts to &lt;tt&gt;false&lt;/tt&gt;.
  188. * For example, by default, using the mapping &quot;foo.bar.baz&quot; will try and read a property foo from the root, then a property bar
  189. * from foo, then a property baz from bar. Setting the simple accessors to true will read the property with the name
  190. * &quot;foo.bar.baz&quot; direct from the root object.
  191. */
  192. useSimpleAccessors: false,
  193. <span id='Ext-data-reader-Json-method-readRecords'> /**
  194. </span> * Reads a JSON object and returns a ResultSet. Uses the internal getTotal and getSuccess extractors to
  195. * retrieve meta data from the response, and extractData to turn the JSON data into model instances.
  196. * @param {Object} data The raw JSON data
  197. * @return {Ext.data.ResultSet} A ResultSet containing model instances and meta data about the results
  198. */
  199. readRecords: function(data) {
  200. //this has to be before the call to super because we use the meta data in the superclass readRecords
  201. if (data.metaData) {
  202. this.onMetaChange(data.metaData);
  203. }
  204. <span id='Ext-data-reader-Json-property-jsonData'> /**
  205. </span> * @deprecated will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead
  206. * @property {Object} jsonData
  207. */
  208. this.jsonData = data;
  209. return this.callParent([data]);
  210. },
  211. //inherit docs
  212. getResponseData: function(response) {
  213. var data;
  214. try {
  215. data = Ext.decode(response.responseText);
  216. }
  217. catch (ex) {
  218. Ext.Error.raise({
  219. response: response,
  220. json: response.responseText,
  221. parseError: ex,
  222. msg: 'Unable to parse the JSON returned by the server: ' + ex.toString()
  223. });
  224. }
  225. //&lt;debug&gt;
  226. if (!data) {
  227. Ext.Error.raise('JSON object not found');
  228. }
  229. //&lt;/debug&gt;
  230. return data;
  231. },
  232. //inherit docs
  233. buildExtractors : function() {
  234. var me = this;
  235. me.callParent(arguments);
  236. if (me.root) {
  237. me.getRoot = me.createAccessor(me.root);
  238. } else {
  239. me.getRoot = function(root) {
  240. return root;
  241. };
  242. }
  243. },
  244. <span id='Ext-data-reader-Json-method-extractData'> /**
  245. </span> * @private
  246. * We're just preparing the data for the superclass by pulling out the record objects we want. If a {@link #record}
  247. * was specified we have to pull those out of the larger JSON object, which is most of what this function is doing
  248. * @param {Object} root The JSON root node
  249. * @return {Ext.data.Model[]} The records
  250. */
  251. extractData: function(root) {
  252. var recordName = this.record,
  253. data = [],
  254. length, i;
  255. if (recordName) {
  256. length = root.length;
  257. if (!length &amp;&amp; Ext.isObject(root)) {
  258. length = 1;
  259. root = [root];
  260. }
  261. for (i = 0; i &lt; length; i++) {
  262. data[i] = root[i][recordName];
  263. }
  264. } else {
  265. data = root;
  266. }
  267. return this.callParent([data]);
  268. },
  269. <span id='Ext-data-reader-Json-method-createAccessor'> /**
  270. </span> * @private
  271. * Returns an accessor function for the given property string. Gives support for properties such as the following:
  272. * 'someProperty'
  273. * 'some.property'
  274. * 'some[&quot;property&quot;]'
  275. * This is used by buildExtractors to create optimized extractor functions when casting raw data into model instances.
  276. */
  277. createAccessor: function() {
  278. var re = /[\[\.]/;
  279. return function(expr) {
  280. if (Ext.isEmpty(expr)) {
  281. return Ext.emptyFn;
  282. }
  283. if (Ext.isFunction(expr)) {
  284. return expr;
  285. }
  286. if (this.useSimpleAccessors !== true) {
  287. var i = String(expr).search(re);
  288. if (i &gt;= 0) {
  289. return Ext.functionFactory('obj', 'return obj' + (i &gt; 0 ? '.' : '') + expr);
  290. }
  291. }
  292. return function(obj) {
  293. return obj[expr];
  294. };
  295. };
  296. }()
  297. });</pre>
  298. </body>
  299. </html>