玩轉extjs5之Ext.data.Model和Ext.data.Store(四)
阿新 • • 發佈:2019-02-20
一、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/
}]
});