玩转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/
     }]
 });