/*
* extjs4.0模型 model store proxy使用详解
*
* 1.普通Model创建 数据模型对真实世界中事物在系统中的反应 ，extjs4.0中mdel相当于db中table或者java中实体类
*
* 2.利用Ext.regModel创建模型
*
* 3.创建模型实例 3种方法
*
* 4.Validations
* 5.自定义验证器
* 6.简单数据代理:即完成我们的数据crud操作
* 7.Model的一对多和多对一（extjs4.0新特性）
*
*/
（一）model
Ext.onReady(function() {
// 1.Ext.define创建模型类
Ext.define("person", {
extend : "Ext.data.Model",
fields : [{
name : 'name',
type : 'auto'
}, {
name : 'age',
type : 'int'
}, {
name : 'email',
type : 'auto'
}]
});
// MvC中model即模型M
Ext.regModel("user", {
fields : [{
name : 'name',
type : 'auto'
}, {
name : 'age',
type : 'int'
}, {
name : 'email',
type : 'auto'
}]
});
// 实例化person类
// 1.new关键字
var ps = new person({
name : '马化腾qq',
age : 40,
email : 'qq@qq.com'
});
// alert(ps.get('name'));
// 2.create关键字(extjs4.0推荐)
var p2 = Ext.create("person", {
name : '周鸿祎360',
age : 40,
email : 'qq@qq.com'
});
// alert(p2.get('age'));
// 3.Ext.ModelMrg.create()
var p3 = Ext.ModelMgr.create({
name : '雷布斯',
age : 30,
email : 'qq@lei.com'
}, 'person');
// alert(p3.get('email'));
// alert(person.getName()) //获取类名
})
（二）valiadatoins
/**
* 数据校验 validations
*/
Ext.onReady(function() {
// 1.Ext.define创建模型类
Ext.data.validations.lengthMessage = "错误长度";// 汉化输出的错误信息
// 自定义验证机制，扩展现有验证机制
Ext.apply(Ext.data.validations, {
age : function(config, value) {
var min = config.min;
var max = config.max;
if (min <= value && value <= max) {
return true;
} else {
this.ageMessage=this.ageMessage+"他范围该在["+min+"~"+max+"]";
return false;
}
},
ageMessage:'age出现错误 '
});
Ext.define("person", {
extend : "Ext.data.Model",
fields : [{
name : 'name',
type : 'auto'
}, {
name : 'age',
type : 'int'
}, {
name : 'email',
type : 'auto'
}],
validations : [{ // 验证name长度
type : 'length',
field : "name",
min : 0,
max : 100
},{
type:'age',
field:'age',
min:0,
max:100
}]
});
var p2 = Ext.create("person", {
name : '周鸿祎360',
age : -40,
email : 'qq@qq.com'
});
var errors = p2.validate();// 返回验证 结果
var errorInfo = [];
errors.each(function(v) {
errorInfo.push(v.field + " " + v.message)
});
alert(errorInfo.join("\n"))
// 数据校验
})
（三）Proxy ：0数据代理）
/**
* Extjs 4.0数据代理
*/
Ext.onReady(function() {
Ext.define("person", {
extend : "Ext.data.Model",
fields : [{
name : 'name',
type : 'auto'
}, {
name : 'age',
type : 'int'
}, {
name : 'email',
type : 'auto'
}],
proxy : {
type : 'ajax',//ajax方式的代理
url : 'person.jsp'// person.jsp里面为json数据
}
});
var p = Ext.ModelManager.getModel("person");// 返回Ext.data.Model
p.load(1, {//1为id
scope : this,
failure : function(record,operation) {
},
success:function(record,operation){
alert(record.data.name)
},
callback:function(record,operation){
}
});
})
person.jsp
<%@page language="java" contentType="text/html; charset=utf-8"%>
<%
System.out.println(request.getParameter("id"));
response.getWriter().write("{name:'www.com',age:23,email:'dd@gg.com'}");
%>
（四） Extjs4.0 Model的一对多关系
/**
* Extjs4.0 Model的一对多关系详解 交由少的那方控制关系类似hibernate
*/
Ext.onReady(function() {
// 声明一个类
Ext.regModel("teacher", {
field : [{
name : 'teacherId',
type : 'int'
}, {
name : 'name',
type : 'auto'
}],
hasMany : {
model : 'student',// 多的一方
name : 'getStudent',
filterProperty : 'teacher_Id'//关联字段
}
});
Ext.regModel("student", {
field : [{
name : 'studentId',
type : 'int'
}, {
name : 'name',
type : 'auto'
}, {
name : 'teacher_Id',
type : 'int'
}]
});
//然后就可以用类似hibernate的那种关系取得数据
//t.student 就可以取得student对象
}