Extjs学习笔记(三) 数据模型model

数据集MODEL

类层次图

  @ MODEL概念：

数据模型对真实世界中对事物在系统中的反应   extjs4.0中的mode相当于 DB中的table 或 JAVA 中的Class

 

  @model的创建：

//第一种方式 我们利用Ext.define来创建我们的模型类
        //DB table person(name,age,email)
        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'}
            ]
        });

 @model的实例：三种方法

//第一种实例化方式 1.new关键字
var p = new person({
    name:'uspcat.com',
    age:26,
    email:'yunfengcheng2008@126.com'
});
// alert(p.get('name'));
//第二种实例化方式
var p1 = Ext.create("person",{
    name:'uspcat.com',
    age:26,
    email:'yunfengcheng2008@126.com'
});
//alert(p1.get('age'));
//第三种实例化方式
var p2 = Ext.ModelMgr.create({
    name:'uspcat.com',
    age:26,
    email:'yunfengcheng2008@126.com'
},'person');
//alert(p2.get('email'));
//alert(p2.getName());//? class object.getClass.getName
alert(person.getName());

 @Validations验证

Ext.data.validations.lengthMessage = "错误的长度";//重定义错误中文提示（汉化）
    Ext.onReady(function(){

               //扩展也就是我们自定义验证机制的的一个新的验证方法
        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:[
                {type:"length",field:"name",min:2,max:6},
                {type:'age',field:"age",min:0,max:150}////age 不能小于0也不能大于150
            ]
        });
        var p1 = Ext.create("person",{
            name:'uspcat.com',
            age:-26,
            email:'yunfengcheng2008@126.com'
        });
        var errors = p1.validate();
        var errorInfo = [];
        errors.each(function(v){
            errorInfo.push(v.field+"  "+v.message);
        });
        alert(errorInfo.join("\n"));
    });

 

@初识数据代理proxy

person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
    System.out.println(request.getParameter("id"));
    response.getWriter().write("{name:'uspcat.com',age:26,email:'yfc@126.com'}");
%>

 代理JS

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:'person.jsp'
            }
        });
        var p = Ext.ModelManager.getModel("person");
        //代理
        p.load(1, {
            scope: this,
            failure: function(record, operation) {
            },
            success: function(record, operation) {
                alert(record.data.name)
            },
            callback: function(record, operation) {
            }
        });
    })

 

@Molde的一对多和多对一

 

(function(){
    Ext.onReady(function(){
        //类老师
        Ext.regModel("teacher",{
            fideld:[
                {name:'teacherId',type:"int"},
                {name:'name',type:"auto"}
            ],
            hasMany:{
                 model: 'student',
                 name : 'getStudent',
                 filterProperty: 'teacher_Id' //关联字段
            }
        });
        //学生
        Ext.regModel("student",{
            fideld:[
                {name:'studentId',type:"int"},
                {name:'name',type:"auto"},
                {name:"teacher_Id",type:'int'}
            ]
        });
        //t.students 得到子类的一个store数据集合，自动变为复数形式。
    })
})();