1. 程式人生 > >玩轉extjs5之Ext.data.Model和Ext.data.Store(四)

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