ExtJS教程（5）---Ext.data.Model之高級應用
阿新 • • 發佈：2019-05-01
normal true track cti ati 使用 ajax start https
版權聲明：本文為博主原創文章，未經博主同意不得轉載。 https://blog.csdn.net/jaune161/article/details/37391399
1、Model的數據驗證
這裏借助官方的一個樣例來說Model數據驗證的基本使用方法
數據驗證在validators屬性中定義，數據驗證的類型在Ext.data.validator下，Ext提供了8中驗證。以下一一解釋意思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 } ], validators: { age: ‘presence‘, name: { type: ‘length‘, min: 2 }, gender: { type: ‘inclusion‘, list: [‘Male‘, ‘Female‘] }, username: [ { type: ‘exclusion‘, list: [‘Admin‘, ‘Operator‘] }, { type: ‘format‘, matcher: /([a-z]+)[0-9]{2,3}/i } ] } }); var instance = Ext.create(‘User‘, { name: ‘Ed‘, gender: ‘Male‘, username: ‘edspencer‘ }); var validation = instance.getValidation(); console.log(validation);
age:‘presence‘,字段後面直接寫字符串表示這個類型的驗證，類型查看的方法。打開這個類，在第一行就能夠看到，例如以下
Ext.data.validator.Presencedata: validator.presence
validator.presence中的presence就是這個驗證類的type，這樣的寫法等同於{type:‘presence‘},presence類的意思是這個字段的值不能是null或undefinedname:使用的是長度驗證，表示最小長度為2，驗證類中各屬性的配置，參見Ext官方API中這個類的config列表
gender:與name相似，表示這個字段僅僅能是‘Male‘,或者‘Female‘
username:的意思是不能包括Admin和Operator而且需滿足後面的正則表達式。
假設一個字段有多個驗證的話能夠參考username的形式。
以下我們自己定義一個年齡的驗證，首先值必須是數字，其次值需大於0小於160
使用方法如同Ext自帶的驗證類，須要註意的是這個類的定義須要在使用之前定義Ext.define(‘Ext.data.validator.Age‘,{ extend:‘Ext.data.validator.Validator‘, alias: ‘data.validator.age‘, type: ‘age‘, config:{ message: ‘Is in the wrong age‘, max:160 //默認最大年齡為160 }, /** * 驗證類中的核心方法 * @param {Object} value * @return {Boolean} 返回true表示通過驗證，否則返回message */ validate:function(value){ console.log(value); var result = Ext.isNumber(value); if(result){ result = value>0 && value < this.getMax(); } return result ? result : this.getMessage(); } });
2、Model轉換的應用
如以下的轉換。我們給電話號碼前面加上+86
Ext.define(‘User‘, {
extend: ‘Ext.data.Model‘,
fields: [
{ name: ‘name‘, type: ‘string‘ },
{ name: ‘age‘, type: ‘int‘ },
{ name: ‘phone‘, type: ‘string‘, convert:function(value){
//假設值是字符串，而且沒有以+86開頭
if(Ext.isString(value) && !Ext.String.startsWith(value,‘+86‘)){
return ‘+86‘+value;
}
}},
{ name: ‘gender‘, type: ‘string‘ },
{ name: ‘username‘, type: ‘string‘ },
{ name: ‘alive‘, type: ‘boolean‘, defaultValue: true }
]
});
var user = Ext.create(‘User‘, {
phone:‘15938383838‘
});
//var validation = instance.getValidation();
console.log(user.get(‘phone‘));這個在0,1轉true、false的時候用的比較多
3、Model之Ajax
Ext.define(‘User‘, {
extend: ‘Ext.data.Model‘,
idProperty:‘id‘,
fields: [‘id‘, ‘name‘, ‘email‘],
proxy: {
type: ‘rest‘,
api: {
create: ‘user/add‘,
read: ‘user/get‘, //在調用Model的靜態方法load時。會默認去這裏查數據
update: ‘user/update‘,
destroy: ‘user/del‘ //在調用Model的erase方法（Ext5.0曾經的版本號是destroy方法，意思就是依據ID刪除Model）
}
}
}); /**
* Destroys the model using the configured proxy.
* @param {Object} options Options to pass to the proxy. Config object for {@link Ext.data.operation.Operation}.
* @return {Ext.data.operation.Operation} The operation
*/
erase: function(options) {
this.drop();
return this.save(options);
},
/**
* Saves the model instance using the configured proxy.
* @param {Object} [options] Options to pass to the proxy. Config object for {@link Ext.data.operation.Operation}.
* @return {Ext.data.operation.Operation} The operation
*/
save: function(options) {
options = Ext.apply({}, options);
var me = this,
phantom = me.phantom,
dropped = me.dropped,
action = dropped ? ‘destroy‘ : (phantom ? ‘create‘ : ‘update‘),
scope = options.scope || me,
callback = options.callback,
proxy = me.getProxy(),
operation;
options.records = [me];
options.internalCallback = function(operation) {
var args = [me, operation],
success = operation.wasSuccessful();
if (success) {
Ext.callback(options.success, scope, args);
} else {
Ext.callback(options.failure, scope, args);
}
args.push(success);
Ext.callback(callback, scope, args);
};
delete options.callback;
operation = proxy.createOperation(action, options);
// Not a phantom, then we must perform this operation on the remote datasource.
// Record will be removed from the store in the callback upon a success response
if (dropped && phantom) {
// If it‘s a phantom, then call the callback directly with a dummy successful ResultSet
operation.setResultSet(Ext.data.reader.Reader.prototype.nullResultSet);
me.setErased();
operation.setSuccessful(true);
} else {
operation.execute();
}
return operation;
},4、Model中的經常使用方法
Model中經常使用的方法在上面也提到了一些。以下介紹上面沒有提到的get(filedName)：依據字段名獲取字段的值。這個在上面用到過。這裏反復強調一遍。這個是用的最多的方法之中的一個
getId()：獲取Model的id，前提是要設置idProperty這個屬性
getIdProperty：獲取ID字段的值
isVaild()：推斷Model是否通過驗證
set( fieldName, newValue, [options] )：為字段賦值。能夠穿一個Object形式的參數如{name:‘jaune‘,age:24}
ExtJS教程（5）---Ext.data.Model之高級應用