ExtJS教程(5)---Ext.data.Modelの高級応用
6943 ワード
1、Modelのデータ検証
ここでは公式の一例を通してModelデータ検証の基本的な使い方を説明します.
age:'presence'は、フィールドの後ろに直接文字列がこのタイプの検証を表しています.タイプビューの方法は、このクラスを開いて、最初の行で次のように見えます.
Ext.data.validator.Prsencentdata: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未満の値が必要です.
2、Model変換の応用
下記のように電話番号の前に+86を追加します.
これは0、1でtrue、falseを回る時に使うものが多いです.
3、ModelのAjax
get(filedName):フィールド名によってフィールドの値を取得します.これは上で使ったことがあります.ここで繰り返し強調します.これは一番多く使う方法の一つです.
getId():Modelのidを取得するには、ID Propertyという属性を設定することが前提です.
getIdProperty:IDフィールドの値を取得します.
isVaild():Modelがset(fieldName,newValue,［options］)を検証することによって、フィールドのために値を付けて、Object形式のパラメータを着ることができるかどうかを判断します.
ここでは公式の一例を通して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);age:'presence'は、フィールドの後ろに直接文字列がこのタイプの検証を表しています.タイプビューの方法は、このクラスを開いて、最初の行で次のように見えます.
Ext.data.validator.Prsencentdata: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();
}
});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;
},get(filedName):フィールド名によってフィールドの値を取得します.これは上で使ったことがあります.ここで繰り返し強調します.これは一番多く使う方法の一つです.
getId():Modelのidを取得するには、ID Propertyという属性を設定することが前提です.
getIdProperty:IDフィールドの値を取得します.
isVaild():Modelがset(fieldName,newValue,［options］)を検証することによって、フィールドのために値を付けて、Object形式のパラメータを着ることができるかどうかを判断します.