正文
ExtJS教程（5）---Ext.data.Model之高级应用
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/jaune161/article/details/37391399
1、Model的数据验证
这里借助官方的一个样例来说Model数据验证的基本使用方法
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);数据验证在validators属性中定义，数据验证的类型在Ext.data.validator下，Ext提供了8中验证。以下一一解释意思
age:'presence',字段后面直接写字符串表示这个类型的验证，类型查看的方法。打开这个类，在第一行就能够看到，例如以下
Ext.data.validator.Presencedata:
validator.presence
validator.presence中的presence就是这个验证类的type，这样的写法等同于{type:'presence'},presence类的意思是这个字段的值不能是null或undefined
name:使用的是长度验证，表示最小长度为2，验证类中各属性的配置，參见Ext官方API中这个类的config列表
gender:与name相似，表示这个字段仅仅能是'Male',或者'Female'
username:的意思是不能包括Admin和Operator而且需满足后面的正則表達式。
假设一个字段有多个验证的话能够參考username的形式。
以下我们自己定义一个年龄的验证，首先值必须是数字，其次值需大于0小于160
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();
}
});使用方法如同Ext自带的验证类，须要注意的是这个类的定义须要在使用之前定义
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'));上面的Model我们给phone加上了转换，那么在定义Model或者给phone赋值时，就会自己主动调用convert，检查phone是否是字符串、是否以+86开头，假设是字符串而且没有以+86开头则自己主动给phone加上+86
这个在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）
}
}
});
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）
}
}
});在调用save方法时。会自己主动推断Model的id属性是否有值假设有就使用update路径。假设没有就使用create路径，在5.0之前的版本号save和update是一个方法，5.0的版本号中事实上save，update，delete用的都是save方法，这一点从源代码中能够看出
/**
* 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}
