extjs4.0模型 model store proxy使用详解

*
 * extjs4.0模型 model store proxy使用详解
 * 
 * 1.普通Model创建 数据模型对真实世界中事物在系统中的反应 ，extjs4.0中mdel相当于db中table或者java中实体类
 * 
 * 2.利用Ext.regModel创建模型
 * 
 * 3.创建模型实例 3种方法
 * 
 * 4.Validations 
 * 5.自定义验证器 
 * 6.简单数据代理:即完成我们的数据crud操作
 *  7.Model的一对多和多对一（extjs4.0新特性）
 * 
 */

 

（一）model 
Ext.onReady(function() {
   // 1.Ext.define创建模型类
   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'
        }]
     });

   // 实例化person类
   // 1.new关键字
   var ps = new person({
      name : '马化腾qq',
      age : 40,
      email : '[e-mail]'
     });
   // alert(ps.get('name'));

   // 2.create关键字(extjs4.0推荐)
   var p2 = Ext.create("person", {
      name : '周鸿祎360',
      age : 40,
      email : '[e-mail]'
     });
   // alert(p2.get('age'));

   // 3.Ext.ModelMrg.create()
   var p3 = Ext.ModelMgr.create({
      name : '雷布斯',
      age : 30,
      email : '[e-mail]'
     }, 'person');
     
    // alert(p3.get('email'));
   // alert(person.getName()) //获取类名
    
  })

 

 

 

（二）valiadatoins

/**

 * 数据校验 validations
 */

Ext.onReady(function() {
 // 1.Ext.define创建模型类
 Ext.data.validations.lengthMessage = "错误长度";// 汉化输出的错误信息

 // 自定义验证机制，扩展现有验证机制

 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 : [{ // 验证name长度
     type : 'length',
     field : "name",
     min : 0,
     max : 100
    },{
    type:'age',
    field:'age',
    min:0,
    max:100
    }]
   });
 var p2 = Ext.create("person", {
    name : '周鸿祎360',
    age : -40,
    email : '[e-mail]'
   });
 var errors = p2.validate();// 返回验证 结果

 var errorInfo = [];
 errors.each(function(v) {
    errorInfo.push(v.field + " " + v.message)

   });
 alert(errorInfo.join("\n"))

  // 数据校验
 })

 

（三）Proxy ：0数据代理）

/**
 * Extjs 4.0数据代理
 */

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',//ajax方式的代理
       url : 'person.jsp'// person.jsp里面为json数据
      }
     });

   var p = Ext.ModelManager.getModel("person");// 返回Ext.data.Model

   p.load(1, {//1为id
      scope : this,
      failure : function(record,operation) {

      },
      success:function(record,operation){
      alert(record.data.name)
      },
      callback:function(record,operation){
      
      }
     });
  })

 

person.jsp

<%@page language="java" contentType="text/html; charset=utf-8"%>
<%
System.out.println(request.getParameter("id"));
response.getWriter().write("{name:'www.com',age:23,email:'[e-mail]'}");
%>

 

 

 

 

（四） Extjs4.0 Model的一对多关系

/**
 * Extjs4.0 Model的一对多关系详解 交由少的那方控制关系类似hibernate
 */
Ext.onReady(function() {
   // 声明一个类

   Ext.regModel("teacher", {
      field : [{
         name : 'teacherId',
         type : 'int'
        }, {
         name : 'name',
         type : 'auto'
        }],
      hasMany : {
       model : 'student',// 多的一方
       name : 'getStudent',
       filterProperty : 'teacher_Id'//关联字段
      }
     });
   Ext.regModel("student", {
      field : [{
         name : 'studentId',
         type : 'int'
        }, {
         name : 'name',
         type : 'auto'
        }, {
         name : 'teacher_Id',
         type : 'int'
        }]
     });
     
     //然后就可以用类似hibernate的那种关系取得数据
     //t.student 就可以取得student对象
  }