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

一、Model的两种创建方式                                                          

model就相当于java中的类，下面我们就来用两种方式来进行创建。

1.define方式创建model： 

Ext.define("person",{
            extend:"Ext.data.Model",
            fields:[
                 {name:'name',type:'auto'},
                 {name:'age',type:'int'},
                 {name:'email',type:'auto'}
            ]
});

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

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

Ext.regModel("user",{
            fields:[
                 {name:'name',type:'auto'},
                 {name:'age',type:'int'},
                 {name:'email',type:'auto'}
            ]
});

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

二、创建Model的实例

创建model的实例有3种方式，model就相当于一个class，而model的实例就相当于类的对象。

1.new方式创建实例：

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

这种创建的方式和我们java中创建对象一样，比较形象化。

2.create方式创建实例:

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

第一个参数给定创建的model的名称，其次给定参数，这样就可以创建一个实例。

3.ModelMgr创建实例：

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

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

三、自定义验证

Ext中给我们提供了一些常用的验证方式，但是这不能完全满足我们的需求，我们可以再此基础上自己进行扩展，自定义验证的一系列规则。首先我们先扩展validation:

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

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},
                 {type:"age",field:"age",min:0,max:150}
            ]
        });

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

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

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

var errors = p1.validate();
        var errorInfo = [];
        errors.each(function(v){
            errorInfo.push(v.field+" "+v.message);
        });
        alert(errorInfo.join("
"));

验证后得到错误提示。

四、简单数据代理

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

(function(){
    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',
                url:'lesson3/person.jsp'
            }
        });

        var p = Ext.ModelMgr.getModel("person");

        p.load(1, {
            scope: this,
            failure: function(record, operation) {
            },
            success: function(record, operation) {
                alert(record.data.name);
            },
            callback: function(record, operation, success) {
            }
        });
    });
})();

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

      <%
          response.getWriter().write("{name:'uspcat.com',age:26,email:'luoxiao.com'}");
       %>

五、model的一对多

(function(){
    Ext.onReady(function(){
        //teacher
        Ext.regModel("teacher",{
            fields:[
               {name:'teacherId',type:'int'},
               {name:'name',type:'auto'}
            ],
            hasMany:{
                //与谁有关系
                model:'student',
                name:'getStudent',
                filterProperty:'teacher_Id'
            }
        });

        //student
        Ext.regModel("student",{
            fields:[
                   {name:'studentId',type:'int'},
                   {name:'name',type:'auto'},
                   {name:'teacher_Id',type:'int'}
            ]
        });

        //t.students   可以得到子类的一个store数据集合

    });
})();