数据代理proxy是进行数据读写的主要途径,通过代理操作数据进行CRUD
每一步操作全会得到唯一的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 命令.
3+方式的代理
//操作内存数据 (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(),function(result){ var datas = result.resultSet.records; Ext.Array.each(datas,function(model){ alert(model.get('name')); }) }); }); })();
//'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"));
})
})();
//将数据保存到本地(不能跨浏览器)并操作,关闭浏览器无影响。
//每次刷新页面 数据都会累加
(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"));
})
})();
//异步请求服务器的数据
(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']); //将json字符串转换为对象
});
});
})();
//跨域请求数据
(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'));
}
});
})
})();