1.定義資料架構
model被用來定義在應用程式中所要使用的資料架構，也就是說定義好model內的資料欄位(field)將取得的資料包裝成model物件後，就可以用model所提供的方法來操作
2.與Store配合使用
model大多與store一起使用，當store使用proxy載入資料後，會將資料轉成model物件，model本身也可以定義proxy，自行載入資料，但比較不建議這樣使用，因Store可以透過Ext.getStore()讓store可以在各個地方使用，model則沒辦法，主要還是把model當作資料架構定義與資料內容驗證用
3.Ext.data.Model包含了四個部分
- Fields:欄位定義
- Proxies:設定取資料用proxy
- Associations:設定model間關聯性
- Validations:驗證
當由server取到json物件要儲存到model欄位
若要儲存到欄位的資料為物件,type可設定為auto
在tmpl內要取用欄位資料用{xxx.xxx}方式往下讀取即可
例
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'obj', type: 'auto'},
]
}
});
三.驗證Validations
對指定的欄位設定驗證規則
在validastions內可設定多條規則
每筆包含type:驗證項目,field:要驗證的欄位
type可使用的值為
- presence:檢查是否有值,0是有效的,空值則無效
- length:可設定最長(max),或最少(min)字元
- format:檢查字串形式,用reg express檢查
- inclusion:設定允許使用的字串
- exclusion:設定不允許使用的字串
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'obj', type: 'auto'},
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'name', message: '不可空白'}
]
}
});
四.關聯Associations
設定好關聯性可以讓model內可包含其他的model
可以在取得資料後,把資料塞到各階層的model內
如果不使用關聯性設定，欄位的內容只是一個object
使用關聯性設定可以讓欄位內容是一個model
1.設定關聯性範例
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],
hasMany: {model: 'Product', name: 'products'}
}
});
2.使用關聯性範例
User.load(1, {
success: function(user) {
console.log("User: " + user.get('name'));
user.posts().each(function(post) {
console.log(post.get('title'));//post本身即是一個model
post.comments().each(function(comment) {//post內的comment也是一個model
console.log(comment.get('message'));
});
});
}
});
例
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],
hasMany: {model: 'Post', name: 'prosts'}
}
});
Ext.define('Post', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],
belongsTo: 'User'
}
});
post.getUser(function(user) {//非同步,要透過callback取得user
console.log('post: ' + user.get('name'))
});
五.id屬性
若model內的data值有id,這id值也會被copy到model上產生internalId值
當model.getId()會取到這internalId值
若有用idProperty指定哪個欄位當id值,則該欄位會被copy到internalId
若資料內沒id值,也沒設定idProperty,就會用系統自己產生的id值
例
Ext.define("Stest.model.ItemModel", {
extend: "Ext.data.Model",
config: {
idProperty: 'firstName',
fields: [
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string'}
]
}
});
否則無法儲存到localStorage上
六.載入資料
model要執行load必須透過Class執行,且執行結果必須要是array,若不是,同樣需要在rootProperty內先處理
Ext.define("Stest.model.ItemModel", {
extend: "Ext.data.Model",
config: {
idProperty: 'firstName',
fields: [
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string'}
]
}
});
七.使用資料
- model.raw : 取到原始資物物件
- model.getData() : 取到修改過的資料物件
- model.get('欄位名稱') : 取到指定欄位值
