数据代理proxy是进行数据读写的主要途径,通过代理操作数据进行CRUD ---增删改查
每一步操作全会得到唯一的Ext.data.Operation实例他包含了所有的请求参数
数据代理proxy目录结构
Ext.data.proxy.Proxy 代理类的根类(他分为客户端(Client)代理和服务器代理(Server))
Ext.data.proxy.Client客户端代理
Ext.data.proxy.Memory 普通的内存代理 ----[重点]
Ext.data.proxy.WebStorage浏览器客户端存储代理
Ext.data.proxy.SessionStorage浏览器级别代理----[重点] 打开新的浏览器后不记录信息session级别
Ext.data.proxy.LocalStorage本地化的级别代理(不能夸浏览器)----[重点] 打开新的浏览器后记录原来信息cookie级别
Ext.data.proxy.Server服务器端代理
Ext.data.proxy.Ajax 异步加载的方式----[重点]
Ext.data.proxy.Rest一种特使的Ajax--[知道]
Ext.data.proxy.JsonP 跨域交互的代理----[重点] 跨域是有严重的安全隐患的 extjs的跨域也是需要服务器端坐相应的配合
1. 普通代理 Memory
(function(){
Ext.onReady(function(){
//定义user的model类
Ext.regModel("user",{
fields:[
{name:"name",type:"string"},
{name:"age",type:"int"}
]
});
//不用create方法我们直接用proxy来创建对象数据
var userdata=[
{name:"hanhan313",age:23},
{name:"ecit",age:2}
];
var memoryProxy=Ext.create("Ext.data.proxy.Memory",{
data:userdata,
model:"user"
});
//每一步操作全会得到唯一的Ext.data.Operation实例他包含了所有的请求参数
//添加数据
userdata.push({name:'newuspcat.com',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'));
});
});
});
})();
结果:
2. 浏览器级别代理SessionStorage
//Ext.data.proxy.SessionStorage浏览器级别代理----[重点] 打开新的浏览器后不记录信息session级别
(function(){
Ext.onReady(function(){
//定义user的model类
Ext.regModel("user",{
fields:[
{name:"name",type:"string"}
],
proxy:{
type:"sessionstorage", //代理的方式
id:"localid" //唯一标示符id
}
});
//使用store初始化数据
var store=new Ext.data.Store({
//数据模版
model:"user"
});
//添加数据
store.add({name:"hanhan313"});
store.sync(); //保存数据
store.load(); //加载数据
var meg=[];
store.each(function(rec){
meg.push(rec.get("name"));
});
alert(meg.join("\n"));
});
})();
如果不关闭浏览器多次刷新的结果:
但是关闭浏览器后在浏览结果:
说明是以session的形式保存的
3. 本地化的级别代理LocalStorage
//Ext.data.proxy.LocalStorage本地化的级别代理(不能夸浏览器)----[重点] 打开新的浏览器后记录原来信息
(function(){
Ext.onReady(function(){
//定义user的model类
Ext.regModel("user",{
fields:[
{name:"name",type:"string"}
],
proxy:{
type:"localstorage",
id:"localid"
}
});
//使用store初始化数据
var store=new Ext.data.Store({
//数据模版
model:"user"
});
//添加数据
store.add({name:"hanhan"});
store.sync(); //保存数据
store.load(); //加载数据
var meg=[];
store.each(function(rec){
meg.push(rec.get("name"));
});
alert(meg.join("\n"));
});
})();
结果:
当关闭浏览器后再次打开访问结果会累加,相当于是以cookie的形式保存的
4. 异步加载的方式Ajax
(function(){
Ext.onReady(function(){
Ext.regModel("person",{
fields:[
{name:'name',type:'string'}
]
});
//Ext.data.proxy.Ajax 异步加载的方式----
var ajaxProxy = new Ext.data.proxy.Ajax({
url:'index.jsp',
model:'person', //读取模型
reader:'json',
limitParam : 'indexLimit'
});
//代理发送请求
ajaxProxy.doRequest(new Ext.data.Operation({
action:'read',
limit:10, //分页的条数
start :1, //从第一页开始查,limit和start会以两个参数向服务器发送
sorters:[
new Ext.util.Sorter({
property:'name', //排序的属性
direction:'ASC' //排序的方式
})
]
}),function(o){
var text = o.response.responseText;
alert(text);
alert(Ext.JSON.decode(text)['name']); //使用decode编码后获取数据
});
});
})();
index.jsp:
<%
response.getWriter().write("{name:'hanhan313',age:26,email:'605474293@qq.com'}");
%>
结果:
5. 跨域交互的代理JsonP
(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'));
}
});
})
})();
person.php:
echo Ext.data.Jsonp.callback1({name:”hanhan313”});