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. C++ 异常机制

    程序在运行的时候可能产生各种可预料到的异常,例如磁盘不足,内存不足,或是数学运算溢出,数组越界之类的.为了解决这些问题,C++提供了异常处理机制,它一般是由try语句和catch语句构成. 一.try ...

  2. CSS3——transform学习

    CSS动画效果可以使用transform和Animation,前者较简单,先学习前者. transform有几个基本变换,平移.旋转.缩放.扭曲 一.translate平移 有translate2d和 ...

  3. preparestatement可以避免注入

    之所以PreparedStatement能防止注入,是因为它把单引号转义了,变成了\',这样一来,就无法截断SQL语句,进而无法拼接SQL语句,基本上没有办法注入了. 不使用这个,我们一般做查询或更新 ...

  4. Java 读写XML

    package dome4jTest; import java.io.FileWriter; import java.io.IOException; import java.net.URL; impo ...

  5. Angular2 组件

    1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...

  6. Python之模块,迭代器与生成器

    本节涉及内容: 1. 迭代器和生成器 2. 递归 3. 字符串格式化 4. 模块 内置模块 自定义模块 第三方模块 5. 序列化的模块 json pickle (一). 迭代器和生成器: 迭代器:  ...

  7. js计算地球两个经纬度之间的距离

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Spring + Jedis集成Redis(单例redis数据库)

    这几天没事,就把之前学习的redis代码整理一遍,废话不多说,上步骤. 1.pom.xml引入资源: <dependency> <groupId>org.springframe ...

  9. 使用json把php数据传给js处理

    先创建下面的两个文件,并将代码拷贝进去,然后打开json.html文件: json.html文件: <!DOCTYPE html> <html> <head> &l ...

  10. WCF全面解析学习(1)

    SOA的基本概念和设计思想 SOA并不是仅仅采用Web服务的架构,Web服务只是一种实现SOA的理想技术手段.SOA依赖于开放的标准.SOA的一个目标是让不同的厂商开发的服务能够相互操作. SOA支持 ...