Ext.data.Model之高级应用

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’,字段后面直接写字符串表示这个类型的验证,类型查看的方法,打开这个类,在第一行就可以看到,如下

data: validator.presencevalidator.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之AjaxExt.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 responseif (dropped && phantom) {// If it's a phantom, then call the callback directly with a dummy successful ResultSetoperation.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}

版权声明:本文为博主原创文章,未经博主允许不得转载。

总结成功的经验能够让人越来越聪明,

Ext.data.Model之高级应用

相关文章:

你感兴趣的文章:

标签云: