当前位置:   article > 正文

数据代理proxy详解_代用数据是什么意思 proxy data

代用数据是什么意思 proxy data

                                                 数据代理proxy详解

简述:proxy是进行数据读写的蛀牙途径,通过代理操作数据(Model)进行CRUD

Ext.data.proxy.Proxy 代理类的根类(它分为客户端(Client)和服务器代理(Server))

每一个操作全会用到唯一的Ext.data.Operation实例,它包含了所以的请求参数,比如分页,如果查询等。

1.客户端代理 Ext.data.proxy.Client根类。

      

       (1)普通的内存代理 Ext.data.proxy.Memory

              1)创建一个model 相当于java中的定义类

              Ext.regModel("user",{

                     fields:[

                            {name:"name",type:"string"},

                     ]

 

              });

              2)创建数组对象来存放数据

              var userDate=[

                     {name:"marico"},

                     {name:"zhang"

              ];

              3)创建model的代理类

              data关键字指定的值,直接用上面定义好的数组来测试

              model指定的是用那一个model模型 直接用上面定义好的user

              var memoryProxy=Ext.create("Ext.data.proxy.Memory",{

                     data:userDate,

                     model:"user"

              });

              4)CRUD操作

              查看  调用的是Ext.data.proxy.Memory类中的read方法

             

              参数:第一个传入的是Ext.data.Operation()类对象,可以在中指定是什么操作

              查询则指定的是read,如果缺省的话指定的read

              第二个传入的是一个回调函数:传入一个result值。这个值里面有一个属性教resultSet其中有属性教records属性               返回的是一个数组,表示多个对象的数组集合,

              第三个指定的是作用域

              memoryProxy.read(new Ext.data.Operation(),function(result){

                     var datas=result.resultSet.records;

                     //alert(result);

                     //Ext.Array中的each方法来遍历

                            第一个指定的那一个数组,第二个回调函数 model参数存放的一个对象实例

                     Ext.Array.each(datas,function(model){

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

                     });

              },this);

              修改   调用Ext.data.proxy.Memory类中的update方法

             

              我们在userData数组中push一个实例

              userData.push({mame:"new Marico"});

              调用update方法传入的参数与read相似

              在指定Operation参数时,将type值变为update data值指定的是对象数组  回调函数则可为空

              memoryProxy.update(new Ext.data.Operation({

                     action:"update",

                     data:userData

              }),function(result){},this);

       (2)浏览器级别代理 Ext.data.proxy.WenStorage

              不能夸浏览器(不同浏览器中存放cookie位置不一样)

              本地化的级别:利用cookie来实现本地化存储,固化到浏览器中

              会话级别:只存在于会话期,关闭浏览器就会消失,与java中的session域一样            

              1)首先定义model

              指定代理proxy

                     type指定的那种代理方式,值为localstrage表示本地化级别的代理 sessionstrage表示会话级别

                     model指定的用的那个model,因为是在usermodel声明中来实现,所以可以省略

                     id 指定的一个标识,全局的id,需要指定成唯一的

              Ext.regModel("user",{

                     fields:[

                            {name:"name",type:"string"},

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

                     ]

                     proxy:{

                            type:"localstrage",

                            model:"user"  //可以省略

                            id:'twitter-Searches'  //全局唯一的id

                     }

              });

              2)创建Ext.data.Store数据集对象(多行记录) 来初始化数据

              model指定的是用的是那一个model

              var store=new Ext.data.Store({

                     model:user

              });

              3)调用Ext.data.Store中的方法来存入数据

              首先add方法来添加一条数据

              store.add({name:"marico"});

              sync方法将数据保存在store

              store.sync();

              load方法将数据载入进来

              store.load();

              4)遍历数据并显示

              定义数组  调用Ext.data.Store中的each方法来遍历 传入一个回调函数,rec参数表示一行数据

              var msg=[];

              store.each(function(rec){

                     msg.push(rec.get("name"));

              });

              alert(msg.join("\n"));

2.服务器端代理Ext.data.proxy.Server 根类

       (1)异步加载方式  Ext.data.proxy.Ajax

              1)定义model类,将ajax请求分离出来,不在声明model时定义

              Ext.regModel("user",{

                     fields:[

                            {name:"name",type:"string"},

                     ]

              });  

              //创建Ext.data.proxy.Ajax对象来代理

              url指定的是请求后台的路径

              model指定的数据模型

              reader指定的读写器的类型

              var ajaxProxy=new Ext.data.proxy.Ajax({

                     url:"person.jsp",

                     model:"user",

                     reader:"json",

              });

              2)调用Ext.data.proxy.Ajax中的doRequest方法来请求

              参数:1>.Operation对象参数,

                     指定一些属性来实现分页 limit指定每页显示多少行记录,start从第几个开始

                     指定属性来实现排序:sorters指定数组  里面存放的是多个Ext.util.Sorter对象

                                   这个对象property指定的是属性名direction指定的是排序方式

                    2>一个回调函数 需呀一个参数    

                     这个参数中有response属性,其中这个属性有responseText属性来返回的是相应的字符串

                     我们需要将字符串解码,利用Ext.JSON对象中的decode方法来将字符串变成我们需要

                     model数据类型的对象存储进来

              ajaxProxy.doRequest(new Ext.data.Operation({

                            action:"read",

                            //分页

                            limit:10,

                            start:1,

                            //排序

                            sorters:[

                                   new Ext.util.Sorter({

                                          property:"name",

                                          direction:"ASC"

                                   })

                            ]

                     }),function(o){

                     var text=o.o.response.responseText;

                     //获取的是一个返回的字符串

                     //alert(o.response.responseText);

                     //利用decode来解码,将字符串变成model对象

                     alert(Ext.JSON.decode(text)["name"]);

              });

      

         (2)跨域交互的代理 Ext.data.proxy.JsonP     

              跨域的请求,可以请求到外网的数据,在外网返回的信息必须有格式规定

              例:Ext.data.JsonP.callback1({name:'uspcat'}) 格式的字符串

              1)定义model指定代理 type需要指定成jsonp方式

              url指定的外网的请求。

              Ext.regModel("user",{

                     fields:[

                            {name:"name",type:"string"},

                     ]

                     proxy:{

                            type:"jsonp",

                            model:"user", //可以省略

                            url:"http://192.168.51.13:8080/extjs/test.jsp"

                     }

              });

              2)创建model对象,这时不会请求

                     var user=Ext.ModelManager.getModel("user");

              3)调用方法load请求

              参数:第一个指定的id

              第二个参数需要一个对象

              scope指定的作用域

              success指定的请求成功后调用的函数,需呀一个参数,这个参数是返回的数据(对象)

              user.load(1,{

                     scope:this,

                     success:function(model){

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

                     }

              });

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/140129?site
推荐阅读
相关标签
  

闽ICP备14008679号