分享

数据模型model

 旭龙 2013-01-27

数据集MODEL

类层次图



  @ MODEL概念:

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

 

  @model的创建:

Js代码  收藏代码
  1. //第一种方式 我们利用Ext.define来创建我们的模型类  
  2.         //DB table person(name,age,email)  
  3.         Ext.define("person",{  
  4.             //继承  
  5.             extend:"Ext.data.Model",  
  6.             fields:[  
  7.                 {name:'name',type:'auto'},  
  8.                 {name:'age',type:'int'},  
  9.                 {name:'email',type:'auto'}  
  10.             ]  
  11.         });  
  12. //第二种方式 MVC模式中model一定是M层  
  13.         Ext.regModel("user",{  
  14.             fields:[  
  15.                 {name:'name',type:'auto'},  
  16.                 {name:'age',type:'int'},  
  17.                 {name:'email',type:'auto'}  
  18.             ]  
  19.         });  

 @model的实例:三种方法

Js代码  收藏代码
  1. //第一种实例化方式 1.new关键字  
  2. var p = new person({  
  3.     name:'uspcat.com',  
  4.     age:26,  
  5.     email:'yunfengcheng2008@126.com'  
  6. });  
  7. // alert(p.get('name'));  
  8. //第二种实例化方式  
  9. var p1 = Ext.create("person",{  
  10.     name:'uspcat.com',  
  11.     age:26,  
  12.     email:'yunfengcheng2008@126.com'  
  13. });  
  14. //alert(p1.get('age'));  
  15. //第三种实例化方式  
  16. var p2 = Ext.ModelMgr.create({  
  17.     name:'uspcat.com',  
  18.     age:26,  
  19.     email:'yunfengcheng2008@126.com'  
  20. },'person');  
  21. //alert(p2.get('email'));  
  22. //alert(p2.getName());//? class object.getClass.getName   
  23. alert(person.getName());  

 @Validations验证

Js代码  收藏代码
  1. Ext.data.validations.lengthMessage = "错误的长度";//重定义错误中文提示(汉化)  
  2.     Ext.onReady(function(){  
  3.       
  4.                //扩展也就是我们自定义验证机制的的一个新的验证方法  
  5.         Ext.apply(Ext.data.validations,{  
  6.             age:function(config, value){  
  7.                 var min = config.min;  
  8.                 var max = config.max;  
  9.                 if(min <= value && value<=max){  
  10.                     return true;  
  11.                 }else{  
  12.                     this.ageMessage = this.ageMessage+"他的范围应该是["+min+"~"+max+"]";  
  13.                     return false;  
  14.                 }  
  15.             },  
  16.             ageMessage:'age数据出现的了错误'  
  17.         });  
  18.           
  19.           
  20.         Ext.define("person",{  
  21.             extend:"Ext.data.Model",  
  22.             fields:[  
  23.                 {name:'name',type:'auto'},  
  24.                 {name:'age',type:'int'},  
  25.                 {name:'email',type:'auto'}  
  26.             ],  
  27.             validations:[  
  28.                 {type:"length",field:"name",min:2,max:6},  
  29.                 {type:'age',field:"age",min:0,max:150}////age 不能小于0也不能大于150  
  30.             ]  
  31.         });  
  32.         var p1 = Ext.create("person",{  
  33.             name:'uspcat.com',  
  34.             age:-26,  
  35.             email:'yunfengcheng2008@126.com'  
  36.         });   
  37.         var errors = p1.validate();  
  38.         var errorInfo = [];  
  39.         errors.each(function(v){  
  40.             errorInfo.push(v.field+"  "+v.message);  
  41.         });  
  42.         alert(errorInfo.join("\n"));  
  43.     });   
 

@初识数据代理proxy

person.jsp

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

 代理JS

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

@Molde的一对多和多对一

 

Js代码  收藏代码
  1. (function(){  
  2.     Ext.onReady(function(){  
  3.         //类老师  
  4.         Ext.regModel("teacher",{  
  5.             fideld:[  
  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.             fideld:[  
  18.                 {name:'studentId',type:"int"},  
  19.                 {name:'name',type:"auto"},  
  20.                 {name:"teacher_Id",type:'int'}  
  21.             ]  
  22.         });  
  23.         //t.students 得到子类的一个store数据集合,自动变为复数形式。  
  24.     })  
  25. })();  
 

 

 

 

本笔记记于“USPCAT.COM的EXTJS4.0视频教程学习过程”


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约