ExtJS笔记 Field

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
时间: 2024-08-03 05:54:43

ExtJS笔记 Field的相关文章

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明                       

extjs笔记(一) ext.onready()用法

定义:加载完ExtJs库之后,开始加载OnReady中指定的函数 参数:onReady( fn, scope, options ) fn回调函数 表示要执行的函数 scope表示函数的作用域 表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可. 事例探究一:加载方法的作用 a. function a(){ alert("every thing is OK!") } Ext.onReady(a); b. Ext.onReady(function(){ a

ExtJS笔记 Tree

The Tree Panel Component is one of the most versatile Components in Ext JS and is an excellent tool for displaying heirarchical data in an application. Tree Panel extends from the same class as Grid Panel, so all of the benefits of Grid Panels - feat

ExtJs之Field.Trigger和Field.Spinner

作文本框功能的. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href=&qu

ExtJS笔记 Form

A Form Panel is nothing more than a basic Panel with form handling abilities added. Form Panels can be used throughout an Ext application wherever there is a need to collect data from the user. In addition, Form Panels can use any Container Layout, p

ExtJS笔记 Grids

参考:http://blog.csdn.net/zhangxin09/article/details/6885175 The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile component that provides an easy way to display, sort, group, and edit data. Grid 面板为 Ext JS 的大头核心之一.它是一个通用性很强

ExtJS笔记--applyTo和renderTo的差别

extjs中常常会用到renderTo或applyTo配置选项.这里,我就比較下两者的差别与使用方法.1.renderTo与render方法相应2.applyTo与applyToMarkup方法相应 一.applyTo的使用:1.applyTo所指向的el元素必需要有父节点.2.applyTo所指向的el元素实际上是充当了对象要渲染的模板,对象是渲染在其父节点内.即对象实例化后所产生的html代码是插入在el元素的父节点内,而el元素本身将仅仅作为模板,并不作为真正的在其位置上的元素,既然作为模

ExtJS笔记 Using Events

Using Events The Components and Classes of Ext JS fire a broad range of events at various points in their lifecycle. Events allow your code to react to changes around your application. They are a key concept within Ext JS. 在ExtJS组件和类的生命周期中,会触发许多类型的事件

ExtJS笔记 Ext.data.Model

A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are us