数据代理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 命令.
Ext.data.proxy.Memory
(function(){
Ext.onReady(function(){
Ext.regModel("user",{
fields:[
{name:'name',type:'string'},
{anem:'age',type:'int'}
]
});
//不用create方法 我们直接用proxy来创建对象数据
var userData = [
{name:'uspcat.com',age:1},
{name:'yunfengcheng',age:26}
];
//创建model的代理类
var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
data:userData,
model:'user'
})
userData.push({name:'new uspcat.com',age:1});
//update
memoryProxy.update(new Ext.data.Operation({
action:'update',
data:userData
}),function(result){},this);
//就可以做CRUD了
memoryProxy.read(new Ext.data.Operation({
action:'read'
}),function(result){
var datas = result.resultSet.records;
Ext.Array.each(datas,function(model){
alert(model.get('name'));
})
});
});
})();
Ext.data.proxy.WebStorage
(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:'uspcat.com'}); store.sync(); store.load(); var msg = []; store.each(function(rec){ msg.push(rec.get('name')); }); alert(msg.join("\n")); }) })();
Ext.data.proxy.SessionStorage
(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:'yunfengcheng'}); store.sync(); store.load(); var msg = []; store.each(function(rec){ msg.push(rec.get('name')); }); alert(msg.join("\n")); }) })();
Ext.data.proxy.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']); //解码
});
});
})();
Ext.data.proxy.JsonP
后台返回要求:
Ext.data.JsonP.callback1(json对象);
js:
(function(){ Ext.onReady(function(){ Ext.regModel("person",{ fields:[ {name:'name',type:'string'} ], proxy:{ type:'jsonp', url:'http://www.uspcat.com/extjs/person.php' } }); var person = Ext.ModelManager.getModel('person'); person.load(1,{ scope:this, success:function(model){ alert(model.get('name')); } }); }); })();