玩转extjs5之Ext.data.Model和Ext.data.Store（四）

一、Ext.data.Model

（1）Model代表应用程序管理的一些对象。例如，我们可能会为我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在模型管理器中注册，被Store使用, 而这些Store又被许多 Ext中许多与数据绑定的组件使用.。

Model定义为字段、任意方法和与模型相关的属性的集合。例如:

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

    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " 六指琴魔";

        this.set('name', newName);
    }
});

创建模型User的实例并调用我们定义的任何模型的逻辑:

var user = Ext.create('User', {
    name : '六指琴魔',
    age  : 26,
    phone: '13800138000'
});

user.changeName();
user.get('name');

（2）Model有内置的验证支持, 通过执行Ext.data.validations中的验证器函数给模型添加验证非常简单，例如：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',     type: 'string'},
        {name: 'age',      type: 'int'},
        {name: 'phone',    type: 'string'},
        {name: 'gender',   type: 'string'},
        {name: 'username', type: 'string'},
        {name: 'alive',    type: 'boolean', defaultValue: true}
    ],

    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'length',    field: 'name',     min: 2},
        {type: 'inclusion', field: 'gender',   list: ['Male', 'Female']},
        {type: 'exclusion', field: 'username', list: ['Admin', 'Operator']},
        {type: 'format',    field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
    ]
});

通过调用validate函数能简单执行验证, 返回一个Ext.data.Errors 对象:

var instance = Ext.create('User', {
    name: '好源码',
    gender: 'Male',
    username: '六指琴魔'
});

var errors = instance.validate();

二、Ext.data.Store

（1）Store 大意是: 仓库、存储的意思. Store类封装了一个客户端缓存,用于存储 Model 对象. Stores 通过一个代理 Proxy 来加载数据, 并提供函数来排序, 过滤以及查询内部所包含的 model 实例.
创建Store非常简单 - 我们只需要传入 Model 以及用来加载/保存数据的Proxy作为配置项即可:

 // 建立一个store要使用的 model
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
     autoLoad: true
 });

（2）内联数据

Store 也可以加载内部指定的数据. 在内部, Store 将我们传入的对象作为data,转换为Model实例。示例如下:

 Ext.create('Ext.data.Store', {
     model: 'User',
     data : [
         {firstName: 'Ed',    lastName: 'Spencer'},
         {firstName: 'Tommy', lastName: 'Maintz'},
         {firstName: 'Aaron', lastName: 'Conran'},
         {firstName: 'Jamie', lastName: 'Avins'}
     ]
 });

（3）过滤与排序

Store 可以进行排序和过滤 - 两种操作既可以在本地执行,也可以远程执行. 排序 sorters 和过滤 filters 都是在 MixedCollection 实例内部执行的, 这种封装使得容易管理和使用. 通常在 Store的配置项中指定 sorters 和 filters 就可以了,当然也可以调用 sort 和 filter 方法:

 var store = Ext.create('Ext.data.Store', {
     model: 'User',
     sorters: [{
         property: 'age',
         direction: 'DESC'
     }, {
         property: 'firstName',
         direction: 'ASC'
     }],

     // 必须包含字母E或者d
     filters: [{
         property: 'firstName',
         value: /Ed/
     }]
 });

玩转extjs5之Ext.data.Model和Ext.data.Store（四）

猜你喜欢