Extjs系列篇（3）—-model数据模型

1、Model的两种建立方式                                                          

model就至关于java中的类，下面咱们就来用两种方式来进行建立。

1.define方式建立model： 

1 Ext.define("person",{
2             extend:"Ext.data.Model",
3             fields:[
4                  {name:'name',type:'auto'},
5                  {name:'age',type:'int'},
6                  {name:'email',type:'auto'}
7             ]
8 });

采用这种方式，第一个参数是model的名称，须要继承自Ext.data.Model，同时给定字段名称和类型。

2.采用regModel的方式建立model：

1 Ext.regModel("user",{
2             fields:[
3                  {name:'name',type:'auto'},
4                  {name:'age',type:'int'},
5                  {name:'email',type:'auto'}
6             ]
7 });

这种方式比第一种稍许简洁，不须要继承，由于它默认返回就是一个model。

2、建立Model的实例

建立model的实例有3种方式，model就至关于一个class，而model的实例就至关于类的对象。

1.new方式建立实例：

1 var p = new person({
2             name : 'luoxiao',
3             age:26,
4             email:"3435@12.com"
5 });

这种建立的方式和咱们java中建立对象同样，比较形象化。

2.create方式建立实例:

1 var p1 = Ext.create("person",{
2             name : 'luoxiao',
3             age:26,
4             email:"3435@12.com"
5 });

第一个参数给定建立的model的名称，其次给定参数，这样就能够建立一个实例。

3.ModelMgr建立实例：

var p2 = Ext.ModelMgr.create({
            name : 'luoxiao',
            age:26,
            email:'3435@12.com'
},'person');

这种方式参数上和第二个方式是相反的。

3、自定义验证

Ext中给咱们提供了一些经常使用的验证方式，可是这不能彻底知足咱们的需求，咱们能够再此基础上本身进行扩展，自定义验证的一系列规则。首先咱们先扩展validation:

 1 Ext.apply(Ext.data.validations,{
 2             age : function(config,value){
 3                 var min = config.min;
 4                 var max = config.max;
 5                 if(min <= value && value<=max){
 6                     return true;
 7                 }else{
 8                     this.ageMessage = this.ageMessage+"应该在["+min+"~"+max+"]";
 9                     return false;
10                 }
11             },
12             ageMessage:'age数据出现了错误'
13         });

Ext.apply用于实现把一个对象中的属性应用于另一个对象中，至关于属性拷贝。也就是说，咱们扩展的age这个属性的规则将会应用到Ext.data.validations中去，在age的function中，第一个参数是配置的参数属性，第二个是传递的值。下面，咱们定义一个model来应用这种验证：

 1 Ext.define("person",{
 2             extend:"Ext.data.Model",
 3             fields:[
 4                  {name:'name',type:'auto'},
 5                  {name:'age',type:'int'},
 6                  {name:'email',type:'auto'},
 7             ],
 8             validations:[
 9                  {type:"length",field:"name",min:2,max:6},
10                  {type:"age",field:"age",min:0,max:150}
11             ]
12         });

能够看到，咱们对name的length进行了验证，包括自定义的age，提供了最小值和最大值。

1 var p1 = Ext.create("person",{
2             name : 'luoxiao',
3             age:-26,
4             email:"3435@12.com"
5 });

这里建立一个person的实例，age为-26，不知足给定的验证条件。

1 var errors = p1.validate();
2         var errorInfo = [];
3         errors.each(function(v){
4             errorInfo.push(v.field+" "+v.message);
5         });
6         alert(errorInfo.join("\n"));

验证后获得错误提示。

4、简单数据代理

什么是数据代理，数据代理就是来完成数据的CURD。

 1 (function(){
 2     Ext.onReady(function(){
 3         Ext.define("person",{
 4             extend:"Ext.data.Model",
 5             fields:[
 6                  {name:'name',type:'auto'},
 7                  {name:'age',type:'int'},
 8                  {name:'email',type:'auto'},
 9             ],
10             proxy:{
11                 type:'ajax',
12                 url:'lesson3/person.jsp'
13             }
14         });
15 
16         var p = Ext.ModelMgr.getModel("person");
17 
18         p.load(1, {
19             scope: this,
20             failure: function(record, operation) {
21             },
22             success: function(record, operation) {
23                 alert(record.data.name);
24             },
25             callback: function(record, operation, success) {
26             }
27         });
28     });
29 })();

这里使用的ajax的方式去请求数据，将jsp中的数据请求到而后load进去。

1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 
3       <%
4           response.getWriter().write("{name:'uspcat.com',age:26,email:'luoxiao.com'}");
5        %>

5、model的一对多

 1 (function(){
 2     Ext.onReady(function(){
 3         //teacher
 4         Ext.regModel("teacher",{
 5             fields:[
 6                {name:'teacherId',type:'int'},
 7                {name:'name',type:'auto'}
 8             ],
 9             hasMany:{
10                 //与谁有关系
11                 model:'student',
12                 name:'getStudent',
13                 filterProperty:'teacher_Id'
14             }
15         });
16 
17         //student
18         Ext.regModel("student",{
19             fields:[
20                    {name:'studentId',type:'int'},
21                    {name:'name',type:'auto'},
22                    {name:'teacher_Id',type:'int'}
23             ]
24         });
25 
26         //t.students   能够获得子类的一个store数据集合
27 
28     });
29 })();