数据代理proxy详解

来源：互联网发布：mac项目进度管理软件编辑：程序博客网时间：2024/06/11 21:12

数据代理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，因为是在user的model声明中来实现，所以可以省略

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"));

}

});