ExtJS4.2学习(6)——基础知识之proxy篇

本次讨论下数据代理，其实个人第一次听到这个短语的时候，并不是特别的适应，在英语中的含义是proxy，其实如若大家也觉得不适应的话，就直接称呼proxy吧。

在ExtJS中，proxy是进行数据读写的主要途径，可以通过proxy操作数据进行增删改查。

通过网上查阅一些资料得知，proxy共分为两大类，分别如下：

Ext.data.proxy.Client 客户端代理

Ext.data.proxy.Memory 普通的内存代理 ----[重点]

Ext.data.proxy.WebStorage 浏览器客户端存储代理

Ext.data.proxy.SessionStorage 浏览器级别代理----[重点]

Ext.data.proxy.LocalStorage 本地化的级别代理cookie(不能跨浏览器)----[重点]

Ext.data.proxy.Server 服务器端代理

Ext.data.proxy.Ajax 异步加载的方式----[重点]

Ext.data.proxy.Rest 一种特使的Ajax--[知道]

Ext.data.proxy.JsonP 跨域交互的代理----[重点] 跨域是有严重的安全隐患的 extjs的跨域也是需要服务器端相应的配合

一、普通的内存代理示例

(function(){
Ext.onReady(function(){
Ext.regModel("user",{
fields:[
{name:'name',type:'string'},
{name:'age',type:'int'}
]
});
//不用create方法 我们直接用proxy来创建对象数据
var userData = [
{name:abc',age:1},
{name:'hello',age:26}
];
//创建model的代理类
var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
data:userData,
model:'user'
})
userData.push({name:'hi',age:1});
//update
memoryProxy.update(new Ext.data.Operation({
action:'update',
data:userData
}),function(result){},this);
//就可以做增删改查了
memoryProxy.read(new Ext.data.Operation(),function(result){
var datas = result.resultSet.records;
Ext.Array.each(datas,function(model){
alert(model.get('name'));
})
});
});
})();

二、浏览器级别代理（session级别代理）

(function(){
Ext.onReady(function(){
Ext.regModel("user",{
fields:[
{name:'name',type:'string'}
],
proxy:{
type:'sessionstorage',
id  : 'twitter-Searches'
}
});
//我们用store来初始化数据
var store = new Ext.data.Store({
model:user
});
store.add({name:'na'});
store.sync();
store.load();
var msg = [];
store.each(function(rec){
msg.push(rec.get('name'));
});
alert(msg.join("\n"));
})
})();

三、本地化级别代理（local级别代理）

(function(){
Ext.onReady(function(){
Ext.regModel("user",{
fields:[
{name:'name',type:'string'}
],
proxy:{
type:'localstorage',
id  : 'twitter-Searches'//全局唯一的
}
});
//我们用store来初始化数据
var store = new Ext.data.Store({
model:user
});
store.add({name:'hello'});
store.sync();
store.load();
var msg = [];
store.each(function(rec){
msg.push(rec.get('name'));
});
alert(msg.join("\n"));
})
})();

四、异步加载的方式代理（ajax方式代理）

(function(){
Ext.onReady(function(){
Ext.regModel("person",{
fields:[
{name:'name',type:'string'}
]
});
var ajaxProxy = new Ext.data.proxy.Ajax({
url:'person.jsp',
model:'person',
reader:'json',
limitParam : 'indexLimit'//将键值对的键改掉名称
});
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.response.responseText;
alert(Ext.JSON.decode(text)['name']);//从字符串编程js对象
});
});
})();

五、跨域交互的代理

上边也说到跨域是有严重的安全隐患的，ExtJS的跨域需要服务器端相应的配合；

基本原理是在你的html中写入一段js脚本，src的来源不再是本域，而是跨域的来源，回调的函数是发送过来的函数；

(function(){
Ext.onReady(function(){
Ext.regModel("person",{
fields:[
{name:'name',type:'string'}
],
proxy:{
type:'jsonp',
url:'abc.jsp'
}
});
var person = Ext.ModelManager.getModel('person');
person.load(1,{
scope:this,
success:function(model){
alert(model.get('name'));
}
});
});
})();