您的位置:首页 > Web前端 > JavaScript

ExtJs学习(一) Ext.data.Model

2017-04-23 19:41 441 查看

一、创建Model

Model代表应用程序管理的一些对象,可理解为Java中的类。Model定义为字段、任意方法和与模型相关的属性的集合。

Ext.onReady(function(){
//利用Ext.define来创建 Model,Ext.regModel方式为旧方式
Ext.define('person',{
extend : 'Ext.data.Model',
fields : [
{name: 'name', type: 'string'},
{name: 'age', type: 'int', convert: null},
{name: 'phone', type: 'string'}
]
});

//实例化person类
//方法1:new 关键字
/* var p1 = new person({
name:'stefan',
age:20,
phone:'107427@qq.com'
});
alert(p1.get('phone'));*/

//方法2: Ext.create() Ext推荐
/* var p2 = Ext.create('person',{
name:'stefan',
age:20,
phone:'107427@qq.com'
});
alert(p2.get('age'));*/

//方法3: Ext.ModelMgr.create
var p3 = Ext.ModelMgr.create({
name:'stefan',
age:20,
phone:'107427@qq.com'
},'person');
alert(p3.get('name'));
});

二、验证机制 validations

Model有内置的验证支持, 通过执行Ext.data.validations中的验证器函数(Ext.data.validations查看所有的验证函数)。

加入name与age的验证:

Ext.define('person',{
extend : 'Ext.data.Model',
fields : [
{name: 'name', type: 'string'},
{name: 'age', type: 'int', convert: null},
{name: 'phone', type: 'string'}
],
validations:[
/**
* name:2~6
* age:0~100
*/
{type:"length",field:"name",min:2,max:6},
{type:"length",field:"name",min:0,max:100}
]
});
通过Ext.apply方法,自定义验证方法:
Ext.apply(Ext.data.validations,{
age:function(config,value){
if (value === undefined) {
return false;
}
var min = config.min;
var max = config.max;
if (min <= value && value <= max) {
return true;
} else {
this.ageMessage = this.ageMesage + "它的范围应为["+min+"~"+max+"]";;
return false;
}
},
aggMessage: 'age数据错误'
});
通过调用validate函数能简单执行验证,
返回一个Ext.data.Errors 对象:
var errors = p1.validate();
var errorInfo = [];
errors.each(function(v){
errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息