ExtJS教程（5）---Ext.data.Model之進階應用程式

標籤：extjs   javascript   

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.presencevalidator.presence中的presence就是這個驗證類的type，這種寫法等同於{type:‘presence‘},presence類的意思是這個欄位的值不能是null或undefined

name:使用的是長度驗證，表示最小長度為2，驗證類中各屬性的配置，參見Ext官方API中這個類的config列表

gender:與name類似，表示這個欄位只能是‘Male‘,或者‘Female‘

username:的意思是不能包含Admin和Operator並且需滿足後面的Regex。如果一個欄位有多個驗證的話可以參考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}