数据代理proxy
数据代理proxy是进行数据读写的一个主要途径,通过代理操作进行CURD
每一步操作全会得到唯一的Ext.data.Operation实例化包含了所有的请求参数
1. 数据代理proxy目录结构
Ext.data.proxy.Proxy代理类的根类划分为客户端(Client)代理和服务器(Server)代理
Ext.data.proxy.Client 客户端代理
Ext.data.proxy.Memory 普通的内存代理
Ext.data.proxy.WebStorage 浏览器客户端存储代理
Ext.data.proxy.SessionStorage 浏览器级别代理
Ext.data.proxy.LocalStorage 本地化的级别代理(不能跨浏览器的)
Ext.data.proxy.Server 服务器端代理
Ext.data.proxy.Ajax 异步加载的方式
Ext.data.proxy.Rest 一种特定的Ajax
Ext.data.proxy.JsonP 跨域交互的代理
跨域的缺点:跨域是有严重性安全隐患的extjs的,跨域也是需要服务器端做相应的配合
Ext.data.proxy.Direct命令
客户端的代理
1.Ext.data.proxy.Memory 普通的内存代理的使用
(function(){
Ext.onReady(function(){
//内存代理的创建
Ext.regModel("user",{
fields:[
{name:'name',type:'string'},
{name:'age',type:'int'}
]
});
//使用内存代理来为类赋值和实例化
var memory = [
{name:'laowang',age:23},
{name:'laoyao',age:22}
]
//利用Ext.data.proxy.Memory 即使内存代理来把类和值连接起来
var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
data:memory,//注意数组不带''
model:'user'
});
//通过使用proxy实现CURD
//其次是更新,用update,把更新放到查找之前可以在更新之后直接读取出来
memory.push({name:'new laowang',age:26})
memoryProxy.update(new Ext.data.Operation({
action:'update',
data:memory
}),function(result){},this)
//首先实现的是查找,通过断点来知道result可以得到一个数组
memoryProxy.read(new Ext.data.Operation(),function(result){
var pdata = result.resultSet.records;
//注意数组不带'',数组的遍历用each方法
Ext.Array.each(pdata,function(model){
alert(model.get('name'));
});
},this);
});
})();
2. Ext.data.proxy.LocalStorage 本地化的级别代理(不能跨浏览器的)
1.(function(){
2. Ext.onReady(function(){
3. //学习Ext.data.proxy.LocalStorage,即是本地化的级别代理,是不夸浏览器的,相当于是cookie
4. Ext.regModel("user",{
5. fields:[
6. {name:'name',type:'string'}
7. ],
8. //指定代理的类型为本地的代理级别,id是唯一的标识
9. proxy:{
10. type:'localstorage',
11. id:'twitter-Searches' //id不可以省去,因为每访问一次就有一个cookie在本地,是通过uuid来标识的
12. }
13. });
14. // 我们用store来初始化数据
15. var store = new Ext.data.Store({
16. model:user
17. });
18. //利用store中的方法来添加数据,store是数据集
19. store.add({name:'laowang'});
20. store.sync();//用来保存添加的数据
21. store.load();//读取存在store中的数据
22.
23. //把数据集通过数组的形式读取出来
24. var msg = [];
25. store.each(function(rec){
26. msg.push(rec.get('name'));
27. //alert(rec.get('name'));这样写看不出来有多少个,还要数
28. });
29. alert(msg.join('\n'));//因为是一个数据集,所以在每次访问之后都会想store中加入一个name,所以each会再多一次循环
30. });
31. })();
3. Ext.data.proxy.SessionStorage 浏览器级别代理
和本地级别的代理不同的是porxy代理不同,其他的都相同
(function(){
Ext.onReady(function(){
//学习Ext.data.proxy.SessionStorage,即是浏览器级别的代理,只限于一次会话
Ext.regModel("user",{
fields:[
{name:'name',type:'string'}
],
//指定代理的类型为本地的代理级别,id是唯一的标识
proxy:{
type:'sessionstorage',
id:'myProxyKey'
}
});
// 我们用store来初始化数据
var store = new Ext.data.Store({
model:user
});
//利用store中的方法来添加数据,store是数据集
store.add({name:'laowang'});
store.sync();//用来保存添加的数据
store.load();//读取存在store中的数据
//把数据集通过数组的形式读取出来
var msg = [];
store.each(function(rec){
msg.push(rec.get('name'));
//alert(rec.get('name'));这样写看不出来有多少个,还要数
});
alert(msg.join('\n')+"一次访问为:"+msg.length+"次");
});
})();
以上的本地代理和浏览器代理的用处:
本地代理可以用于永久的存储,如果只是一次会话就用session代理,比如打开用电脑的时候用的是家庭式的还是网吧式的,如果是网吧式的,在后台编写的时候就可以用的是session代理,只记录当时的情况。
乱码问题没有解决啊!
服务端的代理
1.Ext.data.proxy.Ajax 异步加载的方式
(function(){
Ext.onReady(function(){
Ext.regModel("person",{
fileds:[
{name:'name',type:'string'}
],
});
//利用ajax代理来和jsp页面连接,不用上次我们用到的在proxy中嵌套,把ajax和类的模型提取出来来创建
//里面为ajax的属性
var ajaxProxy = new Ext.data.proxy.Ajax({
model:'person',
url:'extLession/proxy04/person.jsp',
reader:'json'
});
//读取jsp页面的数据
ajaxProxy.doRequest(new Ext.data.Operation(),function(o){
var text = o.response.responseText;//得到的是name的值,但是我们要的是一个类的model,所以再通过属性转化一下。
alert(Ext.JSON.decode(text)['name']);
});
});
})();
2.Ext.data.proxy.JsonP 跨域交互的代理
从本地可以跨域到其他的网站上去
(function(){
Ext.onReady(function(){
//Ext.data.proxy.JsonP 跨域交互的代理
Ext.regModel("person",{
fileds:[
{name:'name',type:'string'}
],
//跨域的代理
proxy:{
type:'jsonp',
url:'http://www.baidu/extjs.com'
}
});
//初始化类
var person = Ext.ModelManager.getModel("person");
person.load(1,{
scope:this,
success:function(model){
alert(model.get('name'));
}
});
});
})();