Extjs4.0的数据模型
Extjs4.0的数据模型
数据模型基本要讲三大部分 model proxy store
1． 普通Molde的创建
数据模型对真实世界中对事物在系统中的反应
Extjs4.0中的model相当于DB中的table，或java中的class
//我们来利用Ext.defind来创建model类
//相当于是DB中的table，比如table名称为person，它的属性为name，age，email
Ext.define("person",{
extend:'Ext.data.Model',
//fields是一个数组，用来存放字段的数组
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'},
]
});
2． 利用Ext.regModel创建模型
3． //MVC模型中的model一定是model层,regModel相当于是继承了model，比较省力吧!
4． Ext.regModel("user",{
5． fields:[
6． {name:'name',type:'auto'},
7． {name:'age',type:'int'},
8． {name:'email',type:'auto'},
9． ]
10． });
11． 创建model实例
3种实例化对象的方法
//实例化类
//第一种 用new关键字
var p = new person({
//传数值
name:'laowang',
age:23,
email:'[email protected]'
});
//当使用get的时候传过去一个字段就会返回这个字段的值，这是get的用法
alert(p.get('name'));
//第二种实例化的方法 用 create方法
var u = Ext.create("user",{
name:'laowang',
age:23,
email:'[email protected]'
});
alert(u.get('age'));
//第三种实例化的方法
var p1 = Ext.ModelMgr.create({
name:'laowang',
age:23,
email:'[email protected]'
},"person");
alert(p1.get("email"));
//???疑问：什么时候用单引号，什么时候用双引号？？？、
12． Validations 模型类的内部的字段验证，比如验证名字不能超过6位
13． (function(){
14． //把错误的提示信息改成汉语，使其变得友好。
15． Ext.data.validations.lengthMessage = "名字的长度是错误的";
16． Ext.onReady(function(){
17． //类的创建
18． Ext.regModel("user",{
19． fields:[
20． {name:'name',type:'auto'},
21． {name:'age',type:'int'},
22． {name:'email',type:'auto'},
23． ],
24． //验证传值的正确性
25． validations:[
26． {type:"length",field:"name",min:2,max:6}
27． ]
28． });
29． //类的实例化
30． var u = Ext.create("user",{
31． name:'laowang',
32． age:23,
33． email:'[email protected]'
34． });
//开启验证
35． var errors = u.validate();
36． var errorsInfo = [];//便利所有的数组，并把错误放到数组中便利
37． //each是便利 function的参数为一个object的对象
38． errors.each(function(v){
39． errorsInfo.push(v.field+" "+v.message);
40． });
41． alert(errorsInfo.join("\n"));
42． //alert(errors);
43． });
44． })()
遇到一个问题 ----- 乱码问题：在最上面加了一句：
Ext.data.validations.lengthMessage = "名字的长度是错误的";,并且已经把zh_CN这个包引进来了，可是还是不行啊，还是乱码
<script type="text/javascript" src="${pageContext.request.contextPath }/ext/ext-lang-zh_CN.js"></script>
44 . 自定义的验证器
首先自己写一个扩展类，来实现判断年龄的函数
//扩展也就是我们自定义验证机制的一个新的验证方法 --- 验证年龄的限制
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数据出现了错误'
});
在开始验证，并确定验证性的正确和错误
//验证传值的正确性
validations:[
{type:"length",field:"name",min:2,max:6},
{type:"age",field:"age",min:0,max:150}
]
45． 简单的数据代理
详细的porxy就是用来完成我们的CURD
通过js界面，运用ajax的技术来得到jsp页面的信息，并在js中输出，实现简单的数据代理
首先在jsp页面中来为类赋值：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
response.getWriter()
.write("{name:'laowang',age:23,email:'[email protected]'}");
%>
在js中得到
(function(){
Ext.onReady(function(){
Ext.define("person",{
extend:'Ext.data.Model',
//fields是一个数组，用来存放字段的数组
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'},
],
//代理,利用ajax的方式来和jsp连接，实现简单的数据代理
proxy:{
type:'ajax',
url:'porson.jsp'
}
});
//实例化类，直接得到person，与jsp相连接，赋值
var p = Ext.ModelManager.getModel("person");
//加载数据
p.load(1, {
scope: this,
failure: function(record, operation) {
},
success: function(record, operation) {
alert(record);
},
callback: function(record, operation) {
}
});
});
})()
遇到一个非常严峻的问题：为什么把jsp页面写成以上的简单格式就可以，如果用myEclipse自动的创建一个jsp，就不可以呢? 以后的jsp不可能是自己手写啊！
46． Extjs4.0的特性 molde的一对一和多对一
47． (function(){
48． Ext.onReady(function(){
49． //老师类
50． Ext.regModel("teacher",{
51． fields:[
52． {name:'teacherId',type:'int'},
53． {name:'name',type:"auto"}
54． ],
55． //两个类的关联
56． hasMany:{
57． model:'student',
58． name:'getstudent',//这里的name必须写
59． filterProperty:'teacher_id'
60． }
61． });
62． //学生类
63． Ext.regModel("student",{
64． fields:[
65． {name:'studentId',type:'int'},
66． {name:'name',type:'auto'},
67． {name:'teacher_id',type:'int'}
68． ]
69． });
70． });
71． })()