--- /dev/null
+<!DOCTYPE html><html><head><title>Ext.data.Field | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
+<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
+
+ req = {
+ liveURL: '.',
+ standAloneMode: true,
+ origDocClass: 'Ext.data.Field',
+ docClass: 'Ext.data.Field',
+ docReq: 'Ext.data.Field',
+ version: '4.0',
+ baseURL: '.',
+ baseDocURL: '.',
+ baseProdURL: '.'
+ };
+
+ clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+ req.source = 'Field3.html#Ext-data.Field';
+ clsInfo = {"methods":[],"cfgs":["convert","dateFormat","defaultValue","mapping","name","persist","sortDir","sortType","type","useNull"],"properties":[],"events":[],"subclasses":[]};
+ Ext.onReady(function() {
+ Ext.create('Docs.classPanel');
+ });
+</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Field3.html#Ext-data.Field" target="_blank">Ext.data.Field</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Fields are used to define what a Model is. They aren't instantiated directly - instead, when we create a class
+that extends <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Ext.data.Model</a>, it will automatically create a Field instance for each field configured in a
+<a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a>. For example, we might set up a model like this:</p>
+
+
+
+
+<pre class="prettyprint"><code>Ext.define('User', {
+ extend: 'Ext.data.Model',
+ fields: [
+ 'name', 'email',
+ {name: 'age', type: 'int'},
+ {name: 'gender', type: 'string', defaultValue: 'Unknown'}
+ ]
+});
+</code></pre>
+
+
+
+
+<p>Four fields will have been created for the User Model - name, email, age and gender. Note that we specified a
+couple of different formats here; if we only pass in the string name of the field (as with name and email), the
+field is set up with the 'auto' type. It's as if we'd done this instead:</p>
+
+
+
+
+<pre class="prettyprint"><code>Ext.define('User', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'name', type: 'auto'},
+ {name: 'email', type: 'auto'},
+ {name: 'age', type: 'int'},
+ {name: 'gender', type: 'string', defaultValue: 'Unknown'}
+ ]
+});
+</code></pre>
+
+
+
+
+<p><u>Types and conversion</u></p>
+
+
+
+
+<p>The <a href="Ext.data.Field.html#type" rel="Ext.data.Field#type" class="docClass">type</a> is important - it's used to automatically convert data passed to the field into the correct
+format. In our example above, the name and email fields used the 'auto' type and will just accept anything that is
+passed into them. The 'age' field had an 'int' type however, so if we passed 25.4 this would be rounded to 25.</p>
+
+
+
+
+<p>Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can
+do this using a <a href="Ext.data.Field.html#convert" rel="Ext.data.Field#convert" class="docClass">convert</a> function. Here, we're going to create a new field based on another:</p>
+
+
+<p><code></p>
+
+<pre class="prettyprint">Ext.define('User', {
+ extend: 'Ext.data.Model',
+ fields: [
+ 'name', 'email',
+ {name: 'age', type: 'int'},
+ {name: 'gender', type: 'string', defaultValue: 'Unknown'},
+
+ {
+ name: 'firstName',
+ convert: function(value, record) {
+ var fullName = record.get('name'),
+ splits = fullName.split(" "),
+ firstName = splits[0];
+
+ return firstName;
+ }
+ }
+ ]
+});
+</code></pre>
+
+
+
+
+<p>Now when we create a new User, the firstName is populated automatically based on the name:</p>
+
+
+<p><code></p>
+
+<pre class="prettyprint">var ed = Ext.ModelManager.create({name: 'Ed Spencer'}, 'User');
+
+console.log(ed.get('firstName')); //logs 'Ed', based on our convert function
+</code></pre>
+
+
+
+
+<p>In fact, if we log out all of the data inside ed, we'll see this:</p>
+
+
+<p><code></p>
+
+<pre class="prettyprint">console.log(ed.data);
+
+//outputs this:
+{
+ age: 0,
+ email: "",
+ firstName: "Ed",
+ gender: "Unknown",
+ name: "Ed Spencer"
+}
+</code></pre>
+
+
+
+
+<p>The age field has been given a default of zero because we made it an int type. As an auto field, email has
+defaulted to an empty string. When we registered the User model we set gender's <a href="Ext.data.Field.html#defaultValue" rel="Ext.data.Field#defaultValue" class="docClass">defaultValue</a> to 'Unknown'
+so we see that now. Let's correct that and satisfy ourselves that the types work as we expect:</p>
+
+
+<p><code></p>
+
+<pre class="prettyprint">ed.set('gender', 'Male');
+ed.get('gender'); //returns 'Male'
+
+ed.set('age', 25.4);
+ed.get('age'); //returns 25 - we wanted an int, not a float, so no decimal places allowed
+</code></pre>
+
+<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-convert" class="member f ni"><a href="Ext.data.Field.html#config-convert" rel="config-convert" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-convert" class="viewSource">view source</a></div><a name="convert"></a><a name="config-convert"></a><a href="Ext.data.Field.html#" rel="config-convert" class="cls expand">convert</a><span> : Function</span></div><div class="description"><div class="short">(Optional) A function which converts the value provided by the Reader into an object that will be stored
+in the Model...</div><div class="long"><p>(Optional) A function which converts the value provided by the Reader into an object that will be stored
+in the Model. It is passed the following parameters:<div class="mdetail-params"><ul>
+<li><b>v</b> : Mixed<div class="sub-desc">The data value as read by the Reader, if undefined will use
+the configured <code><a href="Ext.data.Field.html#defaultValue" rel="Ext.data.Field#defaultValue" class="docClass">defaultValue</a></code>.</div></li>
+<li><b>rec</b> : Ext.data.Model<div class="sub-desc">The data object containing the Model as read so far by the
+Reader. Note that the Model may not be fully populated at this point as the fields are read in the order that
+they are defined in your <a href="Ext.data.Field.html#fields" rel="Ext.data.Field#fields" class="docClass">fields</a> array.</div></li>
+</ul></div></p>
+
+<pre><code>// example of convert function
+function fullName(v, record){
+ return record.name.last + ', ' + record.name.first;
+}
+
+function location(v, record){
+ return !record.city ? '' : (record.city + ', ' + record.state);
+}
+
+Ext.define('Dude', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'fullname', convert: fullName},
+ {name: 'firstname', mapping: 'name.first'},
+ {name: 'lastname', mapping: 'name.last'},
+ {name: 'city', defaultValue: 'homeless'},
+ 'state',
+ {name: 'location', convert: location}
+ ]
+});
+
+// create the data store
+var store = new Ext.data.Store({
+ reader: {
+ type: 'json',
+ model: 'Dude',
+ idProperty: 'key',
+ root: 'daRoot',
+ totalProperty: 'total'
+ }
+});
+
+var myData = [
+ { key: 1,
+ name: { first: 'Fat', last: 'Albert' }
+ // notice no city, state provided in data object
+ },
+ { key: 2,
+ name: { first: 'Barney', last: 'Rubble' },
+ city: 'Bedrock', state: 'Stoneridge'
+ },
+ { key: 3,
+ name: { first: 'Cliff', last: 'Claven' },
+ city: 'Boston', state: 'MA'
+ }
+];
+</code></pre>
+
+</div></div></div><div id="config-dateFormat" class="member ni"><a href="Ext.data.Field.html#config-dateFormat" rel="config-dateFormat" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-dateFormat" class="viewSource">view source</a></div><a name="dateFormat"></a><a name="config-dateFormat"></a><a href="Ext.data.Field.html#" rel="config-dateFormat" class="cls expand">dateFormat</a><span> : String</span></div><div class="description"><div class="short">(Optional) Used when converting received data into a Date when the type is specified as "date".
+
+
+A format string for...</div><div class="long"><p>(Optional) Used when converting received data into a Date when the <a href="Ext.data.Field.html#type" rel="Ext.data.Field#type" class="docClass">type</a> is specified as <code>"date"</code>.</p>
+
+
+<p>A format string for the <a href="Ext.Date.html#parse" rel="Ext.Date#parse" class="docClass">Ext.Date.parse</a> function, or "timestamp" if the
+value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a
+javascript millisecond timestamp. See <a href="Date.html" rel="Date" class="docClass">Date</a></p>
+
+</div></div></div><div id="config-defaultValue" class="member ni"><a href="Ext.data.Field.html#config-defaultValue" rel="config-defaultValue" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-defaultValue" class="viewSource">view source</a></div><a name="defaultValue"></a><a name="config-defaultValue"></a><a href="Ext.data.Field.html#" rel="config-defaultValue" class="cls expand">defaultValue</a><span> : Mixed</span></div><div class="description"><div class="short">(Optional) The default value used when a Model is being created by a Reader
+when the item referenced by the mapping d...</div><div class="long"><p>(Optional) The default value used <b>when a Model is being created by a <a href="Ext.data.reader.Reader.html" rel="Ext.data.reader.Reader" class="docClass">Reader</a></b>
+when the item referenced by the <code><a href="Ext.data.Field.html#mapping" rel="Ext.data.Field#mapping" class="docClass">mapping</a></code> does not exist in the data
+object (i.e. undefined). (defaults to "")</p>
+</div></div></div><div id="config-mapping" class="member ni"><a href="Ext.data.Field.html#config-mapping" rel="config-mapping" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-mapping" class="viewSource">view source</a></div><a name="mapping"></a><a name="config-mapping"></a><a href="Ext.data.Field.html#" rel="config-mapping" class="cls expand">mapping</a><span> : String/Number</span></div><div class="description"><div class="short">(Optional) A path expression for use by the Ext.data.reader.Reader implementation
+that is creating the Model to extra...</div><div class="long"><p>(Optional) A path expression for use by the <a href="Ext.data.reader.Reader.html" rel="Ext.data.reader.Reader" class="docClass">Ext.data.reader.Reader</a> implementation
+that is creating the <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a> to extract the Field value from the data object.
+If the path expression is the same as the field name, the mapping may be omitted.</p>
+
+
+<p>The form of the mapping expression depends on the Reader being used.</p>
+
+
+<div class="mdetail-params"><ul>
+<li><a href="Ext.data.reader.Json.html" rel="Ext.data.reader.Json" class="docClass">Ext.data.reader.Json</a><div class="sub-desc">The mapping is a string containing the javascript
+expression to reference the data from an element of the data item's <a href="Ext.data.reader.Json.html#root" rel="Ext.data.reader.Json#root" class="docClass">root</a> Array. Defaults to the field name.</div></li>
+<li><a href="Ext.data.reader.Xml.html" rel="Ext.data.reader.Xml" class="docClass">Ext.data.reader.Xml</a><div class="sub-desc">The mapping is an <a href="Ext.DomQuery.html" rel="Ext.DomQuery" class="docClass">Ext.DomQuery</a> path to the data
+item relative to the DOM element that represents the <a href="Ext.data.reader.Xml.html#record" rel="Ext.data.reader.Xml#record" class="docClass">record</a>. Defaults to the field name.</div></li>
+<li><a href="Ext.data.reader.Array.html" rel="Ext.data.reader.Array" class="docClass">Ext.data.reader.Array</a><div class="sub-desc">The mapping is a number indicating the Array index
+of the field's value. Defaults to the field specification's Array position.</div></li>
+</ul></div>
+
+
+<p>If a more complex value extraction strategy is required, then configure the Field with a <a href="Ext.data.Field.html#convert" rel="Ext.data.Field#convert" class="docClass">convert</a>
+function. This is passed the whole row object, and may interrogate it in whatever way is necessary in order to
+return the desired data.</p>
+
+</div></div></div><div id="config-name" class="member ni"><a href="Ext.data.Field.html#config-name" rel="config-name" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-name" class="viewSource">view source</a></div><a name="name"></a><a name="config-name"></a><a href="Ext.data.Field.html#" rel="config-name" class="cls expand">name</a><span> : String</span></div><div class="description"><div class="short">The name by which the field is referenced within the Model. This is referenced by, for example,
+the dataIndex propert...</div><div class="long"><p>The name by which the field is referenced within the Model. This is referenced by, for example,
+the <code>dataIndex</code> property in column definition objects passed to <a href="Ext.grid.property.HeaderContainer.html" rel="Ext.grid.property.HeaderContainer" class="docClass">Ext.grid.property.HeaderContainer</a>.</p>
+
+<p>Note: In the simplest case, if no properties other than <code>name</code> are required, a field
+definition may consist of just a String for the field name.</p>
+
+</div></div></div><div id="config-persist" class="member ni"><a href="Ext.data.Field.html#config-persist" rel="config-persist" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-persist" class="viewSource">view source</a></div><a name="persist"></a><a name="config-persist"></a><a href="Ext.data.Field.html#" rel="config-persist" class="cls expand">persist</a><span> : Boolean</span></div><div class="description"><div class="short">False to exclude this field from the Ext.data.Model.modified fields in a model. This
+will also exclude the field from...</div><div class="long"><p>False to exclude this field from the <a href="Ext.data.Model.html#modified" rel="Ext.data.Model#modified" class="docClass">Ext.data.Model.modified</a> fields in a model. This
+will also exclude the field from being written using a <a href="Ext.data.writer.Writer.html" rel="Ext.data.writer.Writer" class="docClass">Ext.data.writer.Writer</a>. This option
+is useful when model fields are used to keep state on the client but do not need to be persisted
+to the server. Defaults to <tt>true</tt>.</p>
+</div></div></div><div id="config-sortDir" class="member ni"><a href="Ext.data.Field.html#config-sortDir" rel="config-sortDir" class="expand more"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-sortDir" class="viewSource">view source</a></div><a name="sortDir"></a><a name="config-sortDir"></a><a href="Ext.data.Field.html#" rel="config-sortDir" class="cls expand">sortDir</a><span> : String</span></div><div class="description"><div class="short"><p>(Optional) Initial direction to sort (<code>"ASC"</code> or <code>"DESC"</code>). Defaults to
+<code>"ASC"</code>.</p>
+</div><div class="long"><p>(Optional) Initial direction to sort (<code>"ASC"</code> or <code>"DESC"</code>). Defaults to
+<code>"ASC"</code>.</p>
+</div></div></div><div id="config-sortType" class="member ni"><a href="Ext.data.Field.html#config-sortType" rel="config-sortType" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-sortType" class="viewSource">view source</a></div><a name="sortType"></a><a name="config-sortType"></a><a href="Ext.data.Field.html#" rel="config-sortType" class="cls expand">sortType</a><span> : Function</span></div><div class="description"><div class="short">(Optional) A function which converts a Field's value to a comparable value in order to ensure
+correct sort ordering. ...</div><div class="long"><p>(Optional) A function which converts a Field's value to a comparable value in order to ensure
+correct sort ordering. Predefined functions are provided in <a href="Ext.data.SortTypes.html" rel="Ext.data.SortTypes" class="docClass">Ext.data.SortTypes</a>. A custom
+sort example:</p>
+
+<pre><code>// current sort after sort we want
+// +-+------+ +-+------+
+// |1|First | |1|First |
+// |2|Last | |3|Second|
+// |3|Second| |2|Last |
+// +-+------+ +-+------+
+
+sortType: function(value) {
+ switch (value.toLowerCase()) // native toLowerCase():
+ {
+ case 'first': return 1;
+ case 'second': return 2;
+ default: return 3;
+ }
+}
+</code></pre>
+
+</div></div></div><div id="config-type" class="member ni"><a href="Ext.data.Field.html#config-type" rel="config-type" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-type" class="viewSource">view source</a></div><a name="type"></a><a name="config-type"></a><a href="Ext.data.Field.html#" rel="config-type" class="cls expand">type</a><span> : Mixed</span></div><div class="description"><div class="short">(Optional) The data type for automatic conversion from received data to the stored value if convert
+has not been spec...</div><div class="long"><p>(Optional) The data type for automatic conversion from received data to the <i>stored</i> value if <code><a href="Ext.data.Field.html#convert" rel="Ext.data.Field#convert" class="docClass">convert</a></code>
+has not been specified. This may be specified as a string value. Possible values are</p>
+
+<div class="mdetail-params"><ul>
+<li>auto (Default, implies no conversion)</li>
+<li>string</li>
+<li>int</li>
+<li>float</li>
+<li>boolean</li>
+<li>date</li></ul></div>
+
+
+<p>This may also be specified by referencing a member of the <a href="Ext.data.Types.html" rel="Ext.data.Types" class="docClass">Ext.data.Types</a> class.</p>
+
+
+<p>Developers may create their own application-specific data types by defining new members of the
+<a href="Ext.data.Types.html" rel="Ext.data.Types" class="docClass">Ext.data.Types</a> class.</p>
+
+</div></div></div><div id="config-useNull" class="member ni"><a href="Ext.data.Field.html#config-useNull" rel="config-useNull" class="expand more ar"><span> </span></a><div class="title"><div class="meta"><a href="Ext.data.Field.html" class="definedIn docClass">Ext.data.Field</a><br/><a href="../source/Field3.html#Ext-data.Field-cfg-useNull" class="viewSource">view source</a></div><a name="useNull"></a><a name="config-useNull"></a><a href="Ext.data.Field.html#" rel="config-useNull" class="cls expand">useNull</a><span> : Boolean</span></div><div class="description"><div class="short">(Optional) Use when converting received data into a Number type (either int or float). If the value cannot be parsed,...</div><div class="long"><p>(Optional) Use when converting received data into a Number type (either int or float). If the value cannot be parsed,
+null will be used if useNull is true, otherwise the value will be 0. Defaults to <tt>false</tt>
+
+</div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff