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)
			}
	    }
	});
在调用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}

猜你喜欢

转载自www.cnblogs.com/ldxsuanfa/p/10799863.html