ExtJS数据模型Model和代理proxy

原文:http://blog.csdn.net/zhangshuaipeng/article/details/7186111

1.普通Model的创建

       数据模型对真实世界中对事务在系统中的反映  extjs中的model相当于DB中的table 或者java中的class

       在MVC模式中的model,一定是M层,在此定义的是M层。

  1).利用Ext中的define继承继承来创建

       主要指定fields字段,它指定的是一个对象数组  每一个对象有一个name和type的属性

       Ext.define("person",{

                     extend:"Ext.data.Model",

                     fields:[

                            {name:'name',type:'auto'},

                            {name:'age',type:'int'},

                            {name:'email',type:'auto'}

                     ]

              });

  2).利用Ext中regModel方法来创建

       直接指定类名和fields关键字就可以,系统将自动来继承Ext.data.Model类

       Ext.regModel("user",{

                     fields:[

                            {name:'name',type:'auto'},

                            {name:'age',type:'int'},

                            {name:'email',type:'auto'}

                     ]

              });

2.创建model的实例

       三种实例化对象的方法

   1).使用new关键字来实例化,参数为对象来指明字段的值,Ext.data.Model类中有get方法,

       传入字段的名,来获取字段的值

       varp=new person({

                     name:'marico',

                     age:26,

                     email:'marico_zhang@163.com'

       });

       alert(p.get("name"));

   2).使用Ext中的create方法来实例化

              varp1=Ext.create("person",{

                     name:'marico',

                     age:26,

                     email:'marico_zhang@163.com'

              });

              alert(p1.get("name"));

   3).利用Ext.ModelManager(别名为:ExtModelMgr)类中的create方法来创建,参数格式先传入对象,再传入类名

       varp2=Ext.ModelMgr.create({

                     name:'marico',

                     age:26,

                     email:'marico_zhang@163.com'

              },"person");

       alert(p2.get("email"));

 

4.验证 Validations

       理解:在java中。由于邮箱地址和年龄都需要来判断时候为正确信息,所以需要验证,在java中的

       set方法中,我们常常会利用if来判断格式是否正确,不正确则不赋值并加入错误信息

      

       1).创建类的时候来指定validations验证

       在创建model时,有关键字validations来指定验证信息。type可以指定是那一种错误信息

       length表示长度信息,field来指定字段名,min最小长度,max最大长度

       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},

                     ]

              });

       2).获取错误信息

              首先调用Ext.data.Model类中的validate方法,它将返回Ext.data.Errors类的对象

              定义一个数组对象来存放错误信息

              调用Ext.data.Errors类中的each方法来遍历首先会传入一个参数,这个参数为一个对象,里面的field属性和message属性

              field是指的字段名,message是错误信息

              varp=new person({

                     name:'marico_zhang',

                     age:21,

                     email:'marico_zhang@163.com'

              });

              varerrors=p.validate();

              varerrorInfo=[];

              errors.each(function(v){

                     errorInfo.push(v.field+"    "+v.message);

              });

              测试:alert(errorInfo.join("\n"));来打印出错误信息。

              这个的错误信息在ext中的源码中来实现的,所以一般为英文,我们也可以在Ext.data.validations类中

              更改这些错误的信息,

              Ext.data.validations.lengthMessage="错误的长度"; //问题,乱码的问题,gbk不会乱码     

5.自定义验证器

       需求:在Ext.data.validations类中提供的验证有限,当我们在开发中有各种的验证,

       所以我需要自定义一个验证的方法来验证我们的数据是否合法

       有两种方法来实现扩展Ext.data.validations验证类,扩展也就是我们自定义验证机制的一个新的验证方法

       1).利用Ext中的apply和applyif方法来改造类来实现扩展

       区别:apply扩展的如果前对象有这个验证就不做操作 而applyif,如果有则就替换掉以前的验证

       需要传入两个参数config和value  config指定的指定传入的值,而value则是传入的值

       在后面来指定的错误信息,系统将自动来返回错误信息

       Ext.apply(Ext.data.validations,{

                     age:function(config,value){

                            varmin=config.min;

                            varmax=config.max;

                            if(min<=value&& value<=max){

                                   returntrue;

                            }else{

                                   this.ageMessage=this.ageMessage+"它的范围在["+min+"~"+max+"]";

                                   returnfalse;

                            }

                     },

                     ageMessage:"age数据出现了错误"

              });

6.简单数据代理

       proxy他就是来完成我们数据的CRUD(增删改查),完成请求后台crud

       1).创建jsp或者后台处理的操作并返回一个json格式的字符串

              <%@pagelanguage="java" contentType="text/html"pageEncoding="UTF-8"%>

       <%

       response.getWriter().write("{name:'marico',age:21,email:'marico_zhang@163.com'}");

       %>

       2).创建model类中指定代理:

       proxy关键字来指定,里面有type和url属性等

       type指定的是那种请求方法,ajax

       url指定请求的后台地址

       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"

                     }

              });

       3).接受后来返回的json数据

       注意:在创建person类的时候不会去请求后台数据,当这个类在实例化后并load载入的时候才会去请求后台

       调用Ext.data.Model类中的load方法来载入数据,第一个参数指定的是id,可以在jsp中利用resquest.getParameter("id");

       来的到这个指定的id值

       第二个参数为一个对象

       scope指定的作用域

      

       failure表示加载失败后执行的操作

       success表示加载成功后执行的操作

       callback表示如果是回调函数执行的操作

       在执行操作时候会传入一个record参数,这个参数表示的存储的就是返回的数据

       record有一个data属性,继续可以指定后面返回json的字段名来获取值

       p.load(1,{

              scope: this,

              failure: function(record,operation) {

                //如果加载失败

               },

              success: function(record,operation) {

                 //加载成功

              alert(record.data.name);

               },

               callback: function(record,operation) {

                 //如果是回调函数

               }

7.Model的一对多和多对一的定义

       理解:在java中可以指定类与类之间的关键,在DB中指定表与表之间的关键,一对多,多对一,一对一,多对多

       创建model类来指定关联关系

       用hasMany来指定关联,

       里面有三个属性model指定类名,

       name来指定创建的时候的属性,这个很重要,如果指定了name,值为getStudent  则可以在创建teacher类的对象中

       直接调用teacher.students  系统会自动加一个s 这个返回的就是student类的集合

       filterProperty:指定的外键的名字

 

       //老师

              Ext.regModel("teacher",{

                     fields:[

                            {name:"teacherId",type:"int"},

                            {name:"name",type:"auto"}

                     ],

                     hasMany:{

                            model:"student",

                            name:"getStudent",

                            filterProperty:"teacher_Id"

                     }

              });

              //学生

              Ext.regModel("student",{

                     fields:[

                            {name:"studentId",type:"int"},

                            {name:"name",type:"auto"},

                            {name:"teacher_Id",type:"int"}

                     ]

              });

 

    总结:在学习extjs中,由于api很多都是英文而且很多。所以推荐用火狐浏览器来测试,debug调用插件来调试程序

       当返回不知道类型的时候,打上断点,然后指定再看相应对象的信息。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值