ExtJs的数据代理proxy

数据代理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:'[e-mail]'}");

%>

结果:

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”});