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"));
相关文章推荐
- ExtJs Ext.data.Model 学习笔记
- ExtJS教程(5)---Ext.data.Model之高级应用
- extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
- extJs 2.1学习笔记(Ext.data.Store篇)
- EXtJS Ext.data.Model
- Extjs学习笔记——Ext.data.JsonStore使用说明
- ExtJs学习系列之 GridPanel:Ext.grid.ColumnModel 列配置属性说明
- ExtJS教程(4)---Ext.data.Model之基础应用
- extjs学习之Ext.selection.CheckboxModel
- EXTJS4 新特性之Ext.data.Model
- extJs 2.1学习笔记(Ext.data.Store篇)
- 转载:EXTJS4 新特性之Ext.data.Model
- extJs 2.1 学习笔记(Ext.data.HttpProxy篇)
- extJs 2.1学习笔记(Ext.data.Store篇)
- ExtJS学习笔记(1)-表单验证,Ext.FormPanel
- extJs 2.1学习笔记(Ext.TabPanel篇)
- ExtJs之Ext.data.Store
- MVC学习之ViewData和ViewModel
- ExtJS学习笔记(5)- Form表单的提交 -Ext.FormPanel
- ExtJs之Ext.data.Store