原文:http://blog.csdn.net/zhangshuaipeng/article/details/7186111
1.普通Model的创建
数据模型对真实世界中对事务在系统中的反映 extjs中的model相当于DB中的table 或者java中的class
在MVC模式中的model,一定是M层,在此定义的是M层。
1).利用Ext中的define继承继承来创建
主要指定fields字段,它指定的是一个对象数组 每一个对象有一个name和type的属性
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
2).利用Ext中regModel方法来创建
直接指定类名和fields关键字就可以,系统将自动来继承Ext.data.Model类
Ext.regModel("user",{
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
2.创建model的实例
三种实例化对象的方法
1).使用new关键字来实例化,参数为对象来指明字段的值,Ext.data.Model类中有get方法,
传入字段的名,来获取字段的值
varp=new person({
name:'marico',
age:26,
email:'marico_zhang@163.com'
});
alert(p.get("name"));
2).使用Ext中的create方法来实例化
varp1=Ext.create("person",{
name:'marico',
age:26,
email:'marico_zhang@163.com'
});
alert(p1.get("name"));
3).利用Ext.ModelManager(别名为:ExtModelMgr)类中的create方法来创建,参数格式先传入对象,再传入类名
varp2=Ext.ModelMgr.create({
name:'marico',
age:26,
email:'marico_zhang@163.com'
},"person");
alert(p2.get("email"));
4.验证 Validations
理解:在java中。由于邮箱地址和年龄都需要来判断时候为正确信息,所以需要验证,在java中的
set方法中,我们常常会利用if来判断格式是否正确,不正确则不赋值并加入错误信息
1).创建类的时候来指定validations验证
在创建model时,有关键字validations来指定验证信息。type可以指定是那一种错误信息
length表示长度信息,field来指定字段名,min最小长度,max最大长度
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
validations:[
{type:"length",field:"name",min:2,max:6},
]
});
2).获取错误信息
首先调用Ext.data.Model类中的validate方法,它将返回Ext.data.Errors类的对象
定义一个数组对象来存放错误信息
调用Ext.data.Errors类中的each方法来遍历首先会传入一个参数,这个参数为一个对象,里面的field属性和message属性
field是指的字段名,message是错误信息
varp=new person({
name:'marico_zhang',
age:21,
email:'marico_zhang@163.com'
});
varerrors=p.validate();
varerrorInfo=[];
errors.each(function(v){
errorInfo.push(v.field+" "+v.message);
});
测试:alert(errorInfo.join("\n"));来打印出错误信息。
这个的错误信息在ext中的源码中来实现的,所以一般为英文,我们也可以在Ext.data.validations类中
更改这些错误的信息,
Ext.data.validations.lengthMessage="错误的长度"; //问题,乱码的问题,gbk不会乱码
5.自定义验证器
需求:在Ext.data.validations类中提供的验证有限,当我们在开发中有各种的验证,
所以我需要自定义一个验证的方法来验证我们的数据是否合法
有两种方法来实现扩展Ext.data.validations验证类,扩展也就是我们自定义验证机制的一个新的验证方法
1).利用Ext中的apply和applyif方法来改造类来实现扩展
区别:apply扩展的如果前对象有这个验证就不做操作 而applyif,如果有则就替换掉以前的验证
需要传入两个参数config和value config指定的指定传入的值,而value则是传入的值
在后面来指定的错误信息,系统将自动来返回错误信息
Ext.apply(Ext.data.validations,{
age:function(config,value){
varmin=config.min;
varmax=config.max;
if(min<=value&& value<=max){
returntrue;
}else{
this.ageMessage=this.ageMessage+"它的范围在["+min+"~"+max+"]";
returnfalse;
}
},
ageMessage:"age数据出现了错误"
});
6.简单数据代理
proxy他就是来完成我们数据的CRUD(增删改查),完成请求后台crud
1).创建jsp或者后台处理的操作并返回一个json格式的字符串
<%@pagelanguage="java" contentType="text/html"pageEncoding="UTF-8"%>
<%
response.getWriter().write("{name:'marico',age:21,email:'marico_zhang@163.com'}");
%>
2).创建model类中指定代理:
proxy关键字来指定,里面有type和url属性等
type指定的是那种请求方法,ajax
url指定请求的后台地址
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
proxy:{
type:"ajax",
url:"person.jsp"
}
});
3).接受后来返回的json数据
注意:在创建person类的时候不会去请求后台数据,当这个类在实例化后并load载入的时候才会去请求后台
调用Ext.data.Model类中的load方法来载入数据,第一个参数指定的是id,可以在jsp中利用resquest.getParameter("id");
来的到这个指定的id值
第二个参数为一个对象
scope指定的作用域
failure表示加载失败后执行的操作
success表示加载成功后执行的操作
callback表示如果是回调函数执行的操作
在执行操作时候会传入一个record参数,这个参数表示的存储的就是返回的数据
record有一个data属性,继续可以指定后面返回json的字段名来获取值
p.load(1,{
scope: this,
failure: function(record,operation) {
//如果加载失败
},
success: function(record,operation) {
//加载成功
alert(record.data.name);
},
callback: function(record,operation) {
//如果是回调函数
}
7.Model的一对多和多对一的定义
理解:在java中可以指定类与类之间的关键,在DB中指定表与表之间的关键,一对多,多对一,一对一,多对多
创建model类来指定关联关系
用hasMany来指定关联,
里面有三个属性model指定类名,
name来指定创建的时候的属性,这个很重要,如果指定了name,值为getStudent 则可以在创建teacher类的对象中
直接调用teacher.students 系统会自动加一个s 这个返回的就是student类的集合
filterProperty:指定的外键的名字
//老师
Ext.regModel("teacher",{
fields:[
{name:"teacherId",type:"int"},
{name:"name",type:"auto"}
],
hasMany:{
model:"student",
name:"getStudent",
filterProperty:"teacher_Id"
}
});
//学生
Ext.regModel("student",{
fields:[
{name:"studentId",type:"int"},
{name:"name",type:"auto"},
{name:"teacher_Id",type:"int"}
]
});
总结:在学习extjs中,由于api很多都是英文而且很多。所以推荐用火狐浏览器来测试,debug调用插件来调试程序
当返回不知道类型的时候,打上断点,然后指定再看相应对象的信息。