Field2.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  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-Field'>/**
  19. </span> * @author Ed Spencer
  20. *
  21. * Fields are used to define what a Model is. They aren't instantiated directly - instead, when we create a class that
  22. * extends {@link Ext.data.Model}, it will automatically create a Field instance for each field configured in a {@link
  23. * Ext.data.Model Model}. For example, we might set up a model like this:
  24. *
  25. * Ext.define('User', {
  26. * extend: 'Ext.data.Model',
  27. * fields: [
  28. * 'name', 'email',
  29. * {name: 'age', type: 'int'},
  30. * {name: 'gender', type: 'string', defaultValue: 'Unknown'}
  31. * ]
  32. * });
  33. *
  34. * Four fields will have been created for the User Model - name, email, age and gender. Note that we specified a couple
  35. * of different formats here; if we only pass in the string name of the field (as with name and email), the field is set
  36. * up with the 'auto' type. It's as if we'd done this instead:
  37. *
  38. * Ext.define('User', {
  39. * extend: 'Ext.data.Model',
  40. * fields: [
  41. * {name: 'name', type: 'auto'},
  42. * {name: 'email', type: 'auto'},
  43. * {name: 'age', type: 'int'},
  44. * {name: 'gender', type: 'string', defaultValue: 'Unknown'}
  45. * ]
  46. * });
  47. *
  48. * # Types and conversion
  49. *
  50. * The {@link #type} is important - it's used to automatically convert data passed to the field into the correct format.
  51. * In our example above, the name and email fields used the 'auto' type and will just accept anything that is passed
  52. * into them. The 'age' field had an 'int' type however, so if we passed 25.4 this would be rounded to 25.
  53. *
  54. * Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do
  55. * this using a {@link #convert} function. Here, we're going to create a new field based on another:
  56. *
  57. * Ext.define('User', {
  58. * extend: 'Ext.data.Model',
  59. * fields: [
  60. * {
  61. * name: 'firstName',
  62. * convert: function(value, record) {
  63. * var fullName = record.get('name'),
  64. * splits = fullName.split(&quot; &quot;),
  65. * firstName = splits[0];
  66. *
  67. * return firstName;
  68. * }
  69. * },
  70. * 'name', 'email',
  71. * {name: 'age', type: 'int'},
  72. * {name: 'gender', type: 'string', defaultValue: 'Unknown'}
  73. * ]
  74. * });
  75. *
  76. * Now when we create a new User, the firstName is populated automatically based on the name:
  77. *
  78. * var ed = Ext.create('User', {name: 'Ed Spencer'});
  79. *
  80. * console.log(ed.get('firstName')); //logs 'Ed', based on our convert function
  81. *
  82. * Fields which are configured with a custom ```convert``` function are read *after* all other fields
  83. * when constructing and reading records, so that if convert functions rely on other, non-converted fields
  84. * (as in this example), they can be sure of those fields being present.
  85. *
  86. * In fact, if we log out all of the data inside ed, we'll see this:
  87. *
  88. * console.log(ed.data);
  89. *
  90. * //outputs this:
  91. * {
  92. * age: 0,
  93. * email: &quot;&quot;,
  94. * firstName: &quot;Ed&quot;,
  95. * gender: &quot;Unknown&quot;,
  96. * name: &quot;Ed Spencer&quot;
  97. * }
  98. *
  99. * The age field has been given a default of zero because we made it an int type. As an auto field, email has defaulted
  100. * to an empty string. When we registered the User model we set gender's {@link #defaultValue} to 'Unknown' so we see
  101. * that now. Let's correct that and satisfy ourselves that the types work as we expect:
  102. *
  103. * ed.set('gender', 'Male');
  104. * ed.get('gender'); //returns 'Male'
  105. *
  106. * ed.set('age', 25.4);
  107. * ed.get('age'); //returns 25 - we wanted an int, not a float, so no decimal places allowed
  108. */
  109. Ext.define('Ext.data.Field', {
  110. requires: ['Ext.data.Types', 'Ext.data.SortTypes'],
  111. alias: 'data.field',
  112. isField: true,
  113. constructor : function(config) {
  114. var me = this,
  115. types = Ext.data.Types,
  116. st;
  117. if (Ext.isString(config)) {
  118. config = {name: config};
  119. }
  120. Ext.apply(me, config);
  121. st = me.sortType;
  122. if (me.type) {
  123. if (Ext.isString(me.type)) {
  124. me.type = types[me.type.toUpperCase()] || types.AUTO;
  125. }
  126. } else {
  127. me.type = types.AUTO;
  128. }
  129. // named sortTypes are supported, here we look them up
  130. if (Ext.isString(st)) {
  131. me.sortType = Ext.data.SortTypes[st];
  132. } else if(Ext.isEmpty(st)) {
  133. me.sortType = me.type.sortType;
  134. }
  135. // Reference this type's default converter if we did not recieve one in configuration.
  136. if (!config.hasOwnProperty('convert')) {
  137. me.convert = me.type.convert; // this may be undefined (e.g., AUTO)
  138. } else if (!me.convert &amp;&amp; me.type.convert &amp;&amp; !config.hasOwnProperty('defaultValue')) {
  139. // If the converter has been nulled out, and we have not been configured
  140. // with a field-specific defaultValue, then coerce the inherited defaultValue into our data type.
  141. me.defaultValue = me.type.convert(me.defaultValue);
  142. }
  143. if (config.convert) {
  144. me.hasCustomConvert = true;
  145. }
  146. },
  147. <span id='Ext-data-Field-cfg-name'> /**
  148. </span> * @cfg {String} name
  149. *
  150. * The name by which the field is referenced within the Model. This is referenced by, for example, the `dataIndex`
  151. * property in column definition objects passed to {@link Ext.grid.property.HeaderContainer}.
  152. *
  153. * Note: In the simplest case, if no properties other than `name` are required, a field definition may consist of
  154. * just a String for the field name.
  155. */
  156. <span id='Ext-data-Field-cfg-type'> /**
  157. </span> * @cfg {String/Object} type
  158. *
  159. * The data type for automatic conversion from received data to the *stored* value if
  160. * `{@link Ext.data.Field#convert convert}` has not been specified. This may be specified as a string value.
  161. * Possible values are
  162. *
  163. * - auto (Default, implies no conversion)
  164. * - string
  165. * - int
  166. * - float
  167. * - boolean
  168. * - date
  169. *
  170. * This may also be specified by referencing a member of the {@link Ext.data.Types} class.
  171. *
  172. * Developers may create their own application-specific data types by defining new members of the {@link
  173. * Ext.data.Types} class.
  174. */
  175. <span id='Ext-data-Field-cfg-convert'> /**
  176. </span> * @cfg {Function} [convert]
  177. *
  178. * A function which converts the value provided by the Reader into an object that will be stored in the Model.
  179. *
  180. * If configured as `null`, then no conversion will be applied to the raw data property when this Field
  181. * is read. This will increase performance. but you must ensure that the data is of the correct type and does
  182. * not *need* converting.
  183. *
  184. * It is passed the following parameters:
  185. *
  186. * - **v** : Mixed
  187. *
  188. * The data value as read by the Reader, if undefined will use the configured `{@link Ext.data.Field#defaultValue
  189. * defaultValue}`.
  190. *
  191. * - **rec** : Ext.data.Model
  192. *
  193. * The data object containing the Model as read so far by the Reader. Note that the Model may not be fully populated
  194. * at this point as the fields are read in the order that they are defined in your
  195. * {@link Ext.data.Model#cfg-fields fields} array.
  196. *
  197. * Example of convert functions:
  198. *
  199. * function fullName(v, record){
  200. * return record.data.last + ', ' + record.data.first;
  201. * }
  202. *
  203. * function location(v, record){
  204. * return !record.data.city ? '' : (record.data.city + ', ' + record.data.state);
  205. * }
  206. *
  207. * Ext.define('Dude', {
  208. * extend: 'Ext.data.Model',
  209. * fields: [
  210. * {name: 'fullname', convert: fullName},
  211. * {name: 'firstname', mapping: 'name.first'},
  212. * {name: 'lastname', mapping: 'name.last'},
  213. * {name: 'city', defaultValue: 'homeless'},
  214. * 'state',
  215. * {name: 'location', convert: location}
  216. * ]
  217. * });
  218. *
  219. * // create the data store
  220. * var store = Ext.create('Ext.data.Store', {
  221. * reader: {
  222. * type: 'json',
  223. * model: 'Dude',
  224. * idProperty: 'key',
  225. * root: 'daRoot',
  226. * totalProperty: 'total'
  227. * }
  228. * });
  229. *
  230. * var myData = [
  231. * { key: 1,
  232. * name: { first: 'Fat', last: 'Albert' }
  233. * // notice no city, state provided in data object
  234. * },
  235. * { key: 2,
  236. * name: { first: 'Barney', last: 'Rubble' },
  237. * city: 'Bedrock', state: 'Stoneridge'
  238. * },
  239. * { key: 3,
  240. * name: { first: 'Cliff', last: 'Claven' },
  241. * city: 'Boston', state: 'MA'
  242. * }
  243. * ];
  244. */
  245. <span id='Ext-data-Field-cfg-serialize'> /**
  246. </span> * @cfg {Function} [serialize]
  247. * A function which converts the Model's value for this Field into a form which can be used by whatever {@link Ext.data.writer.Writer Writer}
  248. * is being used to sync data with the server.
  249. *
  250. * The function should return a string which represents the Field's value.
  251. *
  252. * It is passed the following parameters:
  253. *
  254. * - **v** : Mixed
  255. *
  256. * The Field's value - the value to be serialized.
  257. *
  258. * - **rec** : Ext.data.Model
  259. *
  260. * The record being serialized.
  261. *
  262. */
  263. <span id='Ext-data-Field-cfg-dateFormat'> /**
  264. </span> * @cfg {String} dateFormat
  265. *
  266. * Used when converting received data into a Date when the {@link #type} is specified as `&quot;date&quot;`.
  267. *
  268. * The format dtring is also used when serializing Date fields for use by {@link Ext.data.writer.Writer Writers}.
  269. *
  270. * A format string for the {@link Ext.Date#parse Ext.Date.parse} function, or &quot;timestamp&quot; if the value provided by
  271. * the Reader is a UNIX timestamp, or &quot;time&quot; if the value provided by the Reader is a javascript millisecond
  272. * timestamp. See {@link Ext.Date}.
  273. */
  274. dateFormat: null,
  275. <span id='Ext-data-Field-cfg-useNull'> /**
  276. </span> * @cfg {Boolean} useNull
  277. *
  278. * Use when converting received data into a INT, FLOAT, BOOL or STRING type. If the value cannot be
  279. * parsed, `null` will be used if useNull is true, otherwise a default value for that type will be used:
  280. *
  281. * - for INT and FLOAT - `0`.
  282. * - for STRING - `&quot;&quot;`.
  283. * - for BOOL - `false`.
  284. *
  285. * Note that when parsing of DATE type fails, the value will be `null` regardless of this setting.
  286. */
  287. useNull: false,
  288. <span id='Ext-data-Field-cfg-defaultValue'> /**
  289. </span> * @cfg {Object} [defaultValue=&quot;&quot;]
  290. *
  291. * The default value used when the creating an instance from a raw data object, and the property referenced by the
  292. * `{@link Ext.data.Field#mapping mapping}` does not exist in that data object.
  293. *
  294. * May be specified as `undefined` to prevent defaulting in a value.
  295. */
  296. defaultValue: &quot;&quot;,
  297. <span id='Ext-data-Field-cfg-mapping'> /**
  298. </span> * @cfg {String/Number} mapping
  299. *
  300. * (Optional) A path expression for use by the {@link Ext.data.reader.Reader} implementation that is creating the
  301. * {@link Ext.data.Model Model} to extract the Field value from the data object. If the path expression is the same
  302. * as the field name, the mapping may be omitted.
  303. *
  304. * The form of the mapping expression depends on the Reader being used.
  305. *
  306. * - {@link Ext.data.reader.Json}
  307. *
  308. * The mapping is a string containing the javascript expression to reference the data from an element of the data
  309. * item's {@link Ext.data.reader.Json#cfg-root root} Array. Defaults to the field name.
  310. *
  311. * - {@link Ext.data.reader.Xml}
  312. *
  313. * The mapping is an {@link Ext.DomQuery} path to the data item relative to the DOM element that represents the
  314. * {@link Ext.data.reader.Xml#record record}. Defaults to the field name.
  315. *
  316. * - {@link Ext.data.reader.Array}
  317. *
  318. * The mapping is a number indicating the Array index of the field's value. Defaults to the field specification's
  319. * Array position.
  320. *
  321. * If a more complex value extraction strategy is required, then configure the Field with a {@link #convert}
  322. * function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to
  323. * return the desired data.
  324. */
  325. mapping: null,
  326. <span id='Ext-data-Field-cfg-sortType'> /**
  327. </span> * @cfg {Function} sortType
  328. *
  329. * A function which converts a Field's value to a comparable value in order to ensure correct sort ordering.
  330. * Predefined functions are provided in {@link Ext.data.SortTypes}. A custom sort example:
  331. *
  332. * // current sort after sort we want
  333. * // +-+------+ +-+------+
  334. * // |1|First | |1|First |
  335. * // |2|Last | |3|Second|
  336. * // |3|Second| |2|Last |
  337. * // +-+------+ +-+------+
  338. *
  339. * sortType: function(value) {
  340. * switch (value.toLowerCase()) // native toLowerCase():
  341. * {
  342. * case 'first': return 1;
  343. * case 'second': return 2;
  344. * default: return 3;
  345. * }
  346. * }
  347. */
  348. sortType : null,
  349. <span id='Ext-data-Field-cfg-sortDir'> /**
  350. </span> * @cfg {String} sortDir
  351. *
  352. * Initial direction to sort (`&quot;ASC&quot;` or `&quot;DESC&quot;`). Defaults to `&quot;ASC&quot;`.
  353. */
  354. sortDir : &quot;ASC&quot;,
  355. <span id='Ext-data-Field-cfg-allowBlank'> /**
  356. </span> * @cfg {Boolean} allowBlank
  357. * @private
  358. *
  359. * Used for validating a {@link Ext.data.Model model}. Defaults to true. An empty value here will cause
  360. * {@link Ext.data.Model}.{@link Ext.data.Model#isValid isValid} to evaluate to false.
  361. */
  362. allowBlank : true,
  363. <span id='Ext-data-Field-cfg-persist'> /**
  364. </span> * @cfg {Boolean} persist
  365. *
  366. * False to exclude this field from the {@link Ext.data.Model#modified} fields in a model. This will also exclude
  367. * the field from being written using a {@link Ext.data.writer.Writer}. This option is useful when model fields are
  368. * used to keep state on the client but do not need to be persisted to the server. Defaults to true.
  369. */
  370. persist: true
  371. });
  372. </pre>
  373. </body>
  374. </html>