日期:2014-05-16  浏览次数:20482 次

ExtJS 4.2 教程-04:数据模型

更多的ExtJS教程,点击进入>>《ExtJS 教程目录》,持续更新中……

转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-4-data-model

  • ExtJS 4.2 教程-01:Hello ExtJS
  • ExtJS 4.2 教程-02:bootstrap.js 工作方式
  • ExtJS 4.2 教程-03:使用Ext.define自定义类
  • ExtJS 4.2 教程-04:数据模型
  • ExtJS 4.2 教程-05:客户端代理(proxy)
  • ExtJS 4.2 教程-06:服务器代理(proxy)
  • ExtJS 4.2 教程-07:Ext.Direct

我们在上一节中介绍了如何在ExtJS 中自定义类,这一节中将介绍如何自定义数据模型。

自定义数据模型

在上一节中,我们使用Ext.define 来自定义类,通过Ext.define 定义的类都默认继承自Ext.base 类。如果我们将extend 设置为Ext.data.Model,那么定义的类就是一个数据模型类了。先定义一个简单的数据模型类 User类,代码如下:

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' }
    ]
});

在代码中可以看出,数据模型类其实就是一个继承自Ext.data.Model 的类。

fields 属性中定义了该模型的字段,它可以是对应到数据库中的字段。在使用的时候,数据模型包含的字段和类的属性使用方式不太相同。要访问字段的值,需要视同get 和 set 方法,例如:

var Tom = Ext.create("MyApp.User", {
    name: 'Tom',
    age: 26,
    phone:'123456'
});
Tom.set('age', 20);
Ext.MessageBox.alert('提示', Tom.get('age'));

我们实例化User类,初始化的时候,age的值为26,然后通过set 方法设置为 20,再通过get 方法得到 age 字段的值,运行截图如下:

image

字段类型和转换器

在定义数据模型的时候,我们可以定义字段的类型和该类型的转换器。例如,我们将为User类添加birthday字段,在初始化的时候,我们可能会传入一个字符串类型的日期格式,这个时侯就需要我们来定义一个类型转换器,将字符串格式的日期转换为Date类型。代码如下:

Ext.define('MyApp.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string'