赞
踩
数据代理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"));
}
});
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。