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:'laowang@163.com'

});

//当使用get的时候传过去一个字段就会返回这个字段的值，这是get的用法

alert(p.get('name'));

//第二种实例化的方法 用 create方法

var u = Ext.create("user",{

name:'laowang',

age:23,

email:'laowang@163.com'

});

alert(u.get('age'));

//第三种实例化的方法

var p1 = Ext.ModelMgr.create({

name:'laowang',

age:23,

email:'laowang@163.com'

},"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:'laowang@163.com'

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:'322@.com'}");

%>

在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． })()