Extjs学习笔记(四) 数据代理

Extjs学习笔记(四) 数据代理

数据代理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

1. (function(){  
2.     Ext.onReady(function(){  
3.         Ext.regModel("user",{  
4.             fields:[  
5.                 {name:'name',type:'string'},  
6.                 {anem:'age',type:'int'}  
7.             ]  
8.         });  
9.         //不用create方法 我们直接用proxy来创建对象数据  
10.         var userData = [  
11.             {name:'uspcat.com',age:1},  
12.             {name:'yunfengcheng',age:26}  
13.         ];  
14.         //创建model的代理类  
15.         var memoryProxy = Ext.create("Ext.data.proxy.Memory",{  
16.             data:userData,  
17.             model:'user'  
18.         })  
19.           
20.         userData.push({name:'new uspcat.com',age:1});  
21.         //update  
22.         memoryProxy.update(new Ext.data.Operation({  
23.             action:'update',  
24.             data:userData  
25.         }),function(result){},this);  
26.           
27.         //就可以做CRUD了  
28.         memoryProxy.read(new Ext.data.Operation({  
29.           action:'read'  
30.         }),function(result){  
31.             var datas = result.resultSet.records;  
32.             Ext.Array.each(datas,function(model){  
33.                 alert(model.get('name'));  
34.             })  
35.         });  
36.     });  
37. })();  

 

Ext.data.proxy.WebStorage

1. (function(){  
2.     Ext.onReady(function(){  
3.         Ext.regModel("user",{  
4.             fields:[  
5.                 {name:'name',type:'string'}  
6.             ],  
7.             proxy:{  
8.                 type:'localstorage',  
9.                 id  : 'twitter-Searches'  
10.             }  
11.         });  
12.         //我们用store来初始化数据  
13.         var store = new Ext.data.Store({  
14.             model:user  
15.         });  
16.         store.add({name:'uspcat.com'});  
17.         store.sync();  
18.         store.load();  
19.         var msg = [];  
20.         store.each(function(rec){  
21.             msg.push(rec.get('name'));  
22.         });  
23.         alert(msg.join("\n"));  
24.     })  
25. })();  

 

Ext.data.proxy.SessionStorage

1. (function(){  
2.     Ext.onReady(function(){  
3.         Ext.regModel("user",{  
4.             fields:[  
5.                 {name:'name',type:'string'}  
6.             ],  
7.             proxy:{  
8.                 type:'sessionstorage',  
9.                 id  : 'twitter-Searches'  
10.             }  
11.         });  
12.         //我们用store来初始化数据  
13.         var store = new Ext.data.Store({  
14.             model:user  
15.         });  
16.         store.add({name:'yunfengcheng'});  
17.         store.sync();  
18.         store.load();  
19.         var msg = [];  
20.         store.each(function(rec){  
21.             msg.push(rec.get('name'));  
22.         });  
23.         alert(msg.join("\n"));  
24.     })  
25. })();  

 Ext.data.proxy.Ajax

1. (function(){  
2.     Ext.onReady(function(){  
3.         Ext.regModel("person",{  
4.             fields:[  
5.                 {name:'name',type:'string'}  
6.             ]  
7.         });  
8.         var ajaxProxy = new Ext.data.proxy.Ajax({  
9.             url:'person.jsp',  
10.             model:'person',  
11.             reader:'json',  
12.             limitParam : 'indexLimit'  
13.         });   
14.         ajaxProxy.doRequest(new Ext.data.Operation({  
15.                 action:'read',  
16.                 limit:10,  
17.                 start :1,  
18.                 sorters:[  
19.                     new Ext.util.Sorter({  
20.                         property:'name',  
21.                         direction:'ASC'  
22.                     })  
23.                 ]  
24.             }),function(o){  
25.             var text = o.response.responseText;  
26.             alert(Ext.JSON.decode(text)['name']); //解码  
27.         });  
28.     });  
29. })();  

 Ext.data.proxy.JsonP

 后台返回要求：

 

1. Ext.data.JsonP.callback1(json对象);  

  js：

1. 1. (function(){  
   2.     Ext.onReady(function(){  
   3.         Ext.regModel("person",{  
   4.             fields:[  
   5.                 {name:'name',type:'string'}  
   6.             ],  
   7.             proxy:{  
   8.                 type:'jsonp',  
   9.                 url:'http://www.uspcat.com/extjs/person.php'  
   10.             }  
   11.         });  
   12.         var person = Ext.ModelManager.getModel('person');  
   13.         person.load(1,{  
   14.             scope:this,  
   15.             success:function(model){  
   16.                 alert(model.get('name'));  
   17.             }  
   18.         });  
   19.     });  
   20. })();  

分类:  EXTJS学习,  转发