Fields are used to define what a Model is. They aren't instantiated directly - instead, when we create a class that extendsExt.data.Model, it will automatically create a Field instance for each field configured in a Model. For example, we might set up a model like this:

字段用于定义model是什么。它们不会被直接实例化--做为替代,我们创建model类,它们会根据field配置项自动创建每个字段的实例。例如,我们建立下面的model:

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
'name', 'email',
{name: 'age', type: 'int'},
{name: 'gender', type: 'string', defaultValue: 'Unknown'}
]
});

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:

为会user模型创建四个字段--name、email、age、gender。注意,这里我们指定了一对不同的格式。如果我们仅仅传入字段的名称(对于name和email),字段会被创建为auto类型。就像我们这样做:

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'}
]
});

Types and conversion   类型和转换

The type 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.

类型很重要--它对传给field的数据使用自动转换,转换为正确的格式。在上面的例子中,name和email字段使用auto类型,并将介绍任何传给它们的值。然而,age字段是int类型,因此,如果我们穿25.4给它,会被自动四舍五入为25.

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 convert function. Here, we're going to create a new field based on another:

有时,一个简单的类型是不够的,或者我们希望在加载数据的时候执行一些处理。我们可以使用convert函数做到这点。这里,我们将创建一个基于其它字段的新字段:

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{
name: 'firstName',
convert: function(value, record) {
var fullName = record.get('name'),
splits = fullName.split(" "),
firstName = splits[0]; return firstName;
}
},
'name', 'email',
{name: 'age', type: 'int'},
{name: 'gender', type: 'string', defaultValue: 'Unknown'}
]
});

Now when we create a new User, the firstName is populated automatically based on the name:

现在,当我们创建一个新user,firstName会基于name自动生成:

var ed = Ext.create('User', {name: 'Ed Spencer'});

console.log(ed.get('firstName')); //logs 'Ed', based on our convert function

Fields which are configured with a custom convert function are read after all other fields when constructing and reading records, so that if convert functions rely on other, non-converted fields (as in this example), they can be sure of those fields being present.

具有自定义convert函数配置的自动,会在其它字段之后被构造和读取。

In fact, if we log out all of the data inside ed, we'll see this:

事实上,如果我们log输出所有ed中的数据,我们会看到:

console.log(ed.data);

//outputs this:
{
age: 0,
email: "",
firstName: "Ed",
gender: "Unknown",
name: "Ed Spencer"
}

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 defaultValue to 'Unknown' so we see that now. Let's correct that and satisfy ourselves that the types work as we expect:

age自动被赋予了一个为0的缺省值,因为它们是int类型。作为一个auto字段,email的缺省值是一个空字符串。当我们注册usermodel,gender的缺省值设为’Unknown'。让我们修正这个值,以使其如我们期望的来工作:

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

ExtJS笔记 Field的更多相关文章

  1. extjs笔记

      1.    ExtJs 结构树.. 2 2.    对ExtJs的态度.. 3 3.    Ext.form概述.. 4 4.    Ext.TabPanel篇.. 5 5.    Functio ...

  2. ExtJS笔记 Tree

    The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool ...

  3. ExtJs之Field.Trigger和Field.Spinner

    作文本框功能的. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta h ...

  4. ExtJS笔记 Ext.data.Types

    This is a static class containing the system-supplied data types which may be given to a Field. Type ...

  5. ExtJS笔记 Ext.data.Model

    A Model represents some object that your application manages. For example, one might define a Model ...

  6. ExtJS笔记 Grids

    参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces ...

  7. ExtJS笔记 Form

    A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can ...

  8. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  9. ExtJS笔记5 Components

    参考 :http://blog.csdn.net/zhangxin09/article/details/6914882 An Ext JS application's UI is made up of ...

随机推荐

  1. Inode详解

    一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读 ...

  2. 序列化对象为xml字符串

    /// <summary>    /// 序列化对象为xml字符串    /// </summary>    /// <param name="obj" ...

  3. WIN7下VS2008生成Detours3.0

    Detours是微软开发的一个函数库,可用于捕获系统API.在用其进行程序开发之前,得做一些准备工作: 一.下载Detours       在http://research.microsoft.com ...

  4. iOS UIStackView的理解

    iOS9 提供的UIStackview简化了布局操作,它有些像Android中的liner layout.以前不用UIStackview也是可以做出类似的效果的,不过要添加许多的约束,看得头都大了,使 ...

  5. Linux命令行上程序执行的那一刹那!

    转自:http://www.cppblog.com/cuijixin/archive/2008/03/14/44463.html by falcon<zhangjinw@gmail.com> ...

  6. Python之路,Day2 - Python基础2

    def decode(self, encoding=None, errors=None): """ 解码 """ ""& ...

  7. HTML5 声明兼容IE的写法(转载)

    HTML5 声明兼容IE的写法(转载)   1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <!--[if IE]> <meta http-eq ...

  8. MVC+Easeyui dialog的小问题

    今天在尝试 MVC+Easyui的练习中遇到的一些,小问题. 在.net MVC 中  在_layout.cshtml中设置Easyui 环境  ,在传到子页中,发现$("#dlg" ...

  9. Nodejs学习笔记(十二)--- 定时任务(node-schedule)

    目录 写在之前 Cron风格定时器 通配符解释 范围触发 递归规则定时器 对象文本语法定时器 取消定时器 写在之后 写在之前 在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发 ...

  10. android init进程分析 ueventd

    转自:http://blog.csdn.net/freshui/article/details/2132299 (懒人最近想起我还有csdn好久没打理了,这个Android init躺在我的草稿箱中快 ...