数据模型主要讲三大部分model proxy store

 
1.普通Model的创建
     数据模型是真实世界中事物在系统中的反应 Extj4.0中的model相当于DB中的table或Java中的Class
2.利用Ext.regModel创建模型
3.创建model的实例
    3种实例化对象的方法
4.Validations
5.自定义验证器
6.简单数据代理
  proxy它完成我们数据的CRUD
7.Model的一对多和多对一
   teacher 1=>n student
---------------------------------------------------------------------------------------
lesson3.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.window.Window</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="proxy.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 


--------------------------------------------------------------------------------------


这个例子主要讲两种创建类的方法：Ext.define和Ext.regModel,这两种方式的区别是Ext.regModel不需要自己写继承Ext.data.Model


三种实例化对象的方法：new,Ext.create,Ext.ModelMgr.create


model.js


  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.       //我们利用Ext.define来创建我们的模型类 
  4.       //DB table person(name,age,email) 
  5.       Ext.define("person",{ 
  6.         extend:'Ext.data.Model', 
  7.         fields:[ 
  8.            {name:'name',type:'auto'}, 
  9.        {name:'age',type:'int'}, 
  10.            {name:'email',type:'auto'}, 
  11.         ] 
  12.       }); 
  13.       //MVC模式中model一定是M层 
  14.       Ext.regModel("user",{  
  15.         fields:[ 
  16.            {name:'name',type:'auto'}, 
  17.        {name:'age',type:'int'}, 
  18.            {name:'email',type:'auto'}, 
  19.         ] 
  20.       }); 
  21.       //实例化我们的person类 
  22.       //1.new关键字 
  23.       var p = new person({ 
  24.           name:'upcat.com', 
  25.           age:26, 
  26.           email:'yunfengcheng2008@126.com' 
  27.        }); 
  28.       console.log(p.get('name')); 
  29.       var p2 = Ext.create("person",{ 
  30.           name:'upcat.com', 
  31.           age:26, 
  32.           email:'yunfengcheng2008@126.com' 
  33.       }); 
  34.       console.log(p2.get('age')); 
  35.       var p3 = Ext.ModelMgr.create({ 
  36.           name:'upcat.com', 
  37.           age:26, 
  38.           email:'yunfengcheng2008@126.com' 
  39.       },'person'); 
  40.      console.log(p3.get('name')); 
  41.     }); 
  42. })(); 


-------------------------------------------------------------------------------------


这个例子主要讲创建对象的方法Ext.ModelMgr.create和得到类名的注意事项(必须用类调用getName方法)


model2.js


  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.  
  4.       //我们利用Ext.define来创建我们的模型类 
  5.       //DB table person(name,age,email) 
  6.       Ext.define("person",{ 
  7.         extend:'Ext.data.Model', 
  8.         fields:[ 
  9.            {name:'name',type:'auto'}, 
  10.            {name:'age',type:'int'}, 
  11.            {name:'email',type:'auto'}, 
  12.         ] 
  13.       }); 
  14.  
  15.       var p = Ext.ModelMgr.create({ 
  16.           name:'upcat.com', 
  17.           age:26, 
  18.           email:'yunfengcheng2008@126.com' 
  19.       },'person'); 
  20.      //想要得到类的方法名 
  21.      //下面的代码会报：p.getName is not a function 
  22.      //console.log(p.getName());//java class object.getClass.getName    
  23.       
  24.      console.log(person.getName()); 
  25.     }); 
  26. })(); 


--------------------------------------------------------------------------------------


这个例子主要讲校验，包括更改校验的提示信息，自定义校验方法，model中如何校验


validations.js


  1. (function(){ 
  2.     //使提示信息显示中文 
  3.     Ext.data.validations.lengthMessage = "错误的长度"; 
  4.     Ext.onReady(function(){ 
  5.  
  6.  
  7.      //扩展也就是我们自定义验证机制的一个新的验证方法 
  8.      Ext.apply(Ext.data.validations,{ 
  9.         age:function(config,value){ 
  10.            var min = config.min; 
  11.            var max = config.max; 
  12.            if(min <= value && value<= max){ 
  13.               return true; 
  14.            }else{ 
  15.               this.ageMessage = this.ageMessage+'它的范围应该在['+min+'~'+max+"]"; 
  16.               return false; 
  17.            }    
  18.         }, 
  19.         ageMessage:'age数据出现了错误' 
  20.      }); 
  21.              
  22.  
  23.      //我们利用Ext.define来创建我们的模型类 
  24.       //DB table person(name,age,email) 
  25.       Ext.define("person",{ 
  26.         extend:'Ext.data.Model', 
  27.         fields:[ 
  28.            {name:'name',type:'auto'}, 
  29.            {name:'age',type:'int'}, 
  30.            {name:'email',type:'auto'}, 
  31.         ], 
  32.         validations:[ 
  33.               {type:'length',field:'name',min:2,max:6}, 
  34.               {type:'age',field:'age',min:0,max:150} 
  35.         ] 
  36.       }); 
  37.  
  38.       //实例化我们的person类 
  39.       var p = Ext.create("person",{ 
  40.           name:'upcat.com', 
  41.           age:-26, 
  42.           email:'yunfengcheng2008@126.com' 
  43.       }); 
  44.       var errors = p.validate(); 
  45.       var errorInfo = []; 
  46.       errors.each(function(v){ 
  47.          console.log(v); 
  48.          errorInfo.push(v.field + " " + v.message); 
  49.        
  50.       }); 
  51.       console.log(errorInfo.join("\n")); 
  52.       /** 
  53.       *name 2-6 
  54.       *set(String name){ 
  55.       *  if(){ 
  56.       *  }else{ 
  57.       *  } 
  58.       */ 
  59.       //age不能小于0也不能大于150 
  60.        
  61.        
  62.     }); 
  63. })(); 


-------------------------------------------------------------------------------------


这个例子主要讲代理(在模型中定义的代理proxy)：


proxy.js


  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:'person.jsp' 
  13.         } 
  14.       }); 
  15.        var p = Ext.ModelManager.getModel('person'); 
  16.        //1传递过去是id=1 
  17.        p.load(1,{ 
  18.            scope:this, 
  19.            failure:function(record,operation){}, 
  20.            success:function(record,operation){ 
  21.               console.log(record.data.name); 
  22.            }, 
  23.            callback:function(record,operation){} 
  24.        }); 
  25.     }); 
  26.  
  27.   
  28. })(); 


person.jsp


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


-----------------------------------------------------------------------------------


下面代码只是实例，不能够看出什么效果，讲的是model一对多的关系


one2many.js


 


  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.     //类老师 
  4.         Ext.regModel("teacher",{ 
  5.             field:[ 
  6.                 {name:'teacherId',type:'int'}, 
  7.                 {name:'name',type:'auto'} 
  8.             ], 
  9.             hasMany:{ 
  10.                model:'student', 
  11.                name:'getStudent', 
  12.                filterProperty:'teacher_Id' 
  13.             } 
  14.         }); 
  15.     //类学生 
  16.         Ext.regModel("student",{ 
  17.             field:[ 
  18.                 {name:'studentId',type:'int'}, 
  19.                 {name:'name',type:'auto'}, 
  20.                 {name:'teacher_Id',type:'int'} 
  21.             ] 
  22.         }); 
  23.         //t.students 得到子类的一个store数据集合 
  24.     }); 
  25. })(); 


 


11111111111