现在的位置: 首页 > 综合 > 正文

extjs4.0的数据代理proxy

2013年10月20日 ⁄ 综合 ⁄ 共 4680字 ⁄ 字号 评论关闭

数据代理proxy

数据代理proxy是进行数据读写的一个主要途径,通过代理操作进行CURD

每一步操作全会得到唯一的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命令

 

 

客户端的代理

1.Ext.data.proxy.Memory  普通的内存代理的使用

(function(){

    Ext.onReady(function(){

       //内存代理的创建

       Ext.regModel("user",{

           fields:[

              {name:'name',type:'string'},

              {name:'age',type:'int'}

           ]

       });

       //使用内存代理来为类赋值和实例化

       var memory = [

           {name:'laowang',age:23},

           {name:'laoyao',age:22}

       ]

       //利用Ext.data.proxy.Memory  即使内存代理来把类和值连接起来

       var memoryProxy = Ext.create("Ext.data.proxy.Memory",{

           data:memory,//注意数组不带''

           model:'user'

       });

      

       //通过使用proxy实现CURD

       //其次是更新,用update,把更新放到查找之前可以在更新之后直接读取出来

       memory.push({name:'new laowang',age:26})

      

       memoryProxy.update(new Ext.data.Operation({

           action:'update',

           data:memory

       }),function(result){},this)

 

       //首先实现的是查找,通过断点来知道result可以得到一个数组

       memoryProxy.read(new Ext.data.Operation(),function(result){

           var pdata = result.resultSet.records;

           //注意数组不带'',数组的遍历用each方法

           Ext.Array.each(pdata,function(model){

              alert(model.get('name'));

           });

       },this);

    });

})();

2. Ext.data.proxy.LocalStorage  本地化的级别代理(不能跨浏览器的)

1.(function(){

2.  Ext.onReady(function(){

3.  //学习Ext.data.proxy.LocalStorage,即是本地化的级别代理,是不夸浏览器的,相当于是cookie

4.  Ext.regModel("user",{

5.      fields:[

6.          {name:'name',type:'string'}

7.      ],

8.      //指定代理的类型为本地的代理级别,id是唯一的标识

9.      proxy:{

10.        type:'localstorage',

11.        id:'twitter-Searches' //id不可以省去,因为每访问一次就有一个cookie在本地,是通过uuid来标识的

12.    }

13. });

14. // 我们用store来初始化数据

15. var store = new Ext.data.Store({

16.    model:user

17. });

18. //利用store中的方法来添加数据,store是数据集

19. store.add({name:'laowang'});

20. store.sync();//用来保存添加的数据

21. store.load();//读取存在store中的数据

22.

23. //把数据集通过数组的形式读取出来

24. var msg = [];

25. store.each(function(rec){

26.    msg.push(rec.get('name'));

27.    //alert(rec.get('name'));这样写看不出来有多少个,还要数

28. });

29. alert(msg.join('\n'));//因为是一个数据集,所以在每次访问之后都会想store中加入一个name,所以each会再多一次循环

30. });

31.   })();

 

 

3. Ext.data.proxy.SessionStorage  浏览器级别代理

和本地级别的代理不同的是porxy代理不同,其他的都相同

(function(){

    Ext.onReady(function(){

    //学习Ext.data.proxy.SessionStorage,即是浏览器级别的代理,只限于一次会话

    Ext.regModel("user",{

       fields:[

           {name:'name',type:'string'}

       ],

       //指定代理的类型为本地的代理级别,id是唯一的标识

       proxy:{

            type:'sessionstorage',

            id:'myProxyKey' 

        }

    });

    // 我们用store来初始化数据

    var store = new Ext.data.Store({

       model:user

    });

    //利用store中的方法来添加数据,store是数据集

    store.add({name:'laowang'});

    store.sync();//用来保存添加的数据

    store.load();//读取存在store中的数据

   

    //把数据集通过数组的形式读取出来

    var msg = [];

    store.each(function(rec){

       msg.push(rec.get('name'));

       //alert(rec.get('name'));这样写看不出来有多少个,还要数

    });

   

    alert(msg.join('\n')+"一次访问为:"+msg.length+"次"); 

    });

})();

以上的本地代理和浏览器代理的用处:

    本地代理可以用于永久的存储,如果只是一次会话就用session代理,比如打开用电脑的时候用的是家庭式的还是网吧式的,如果是网吧式的,在后台编写的时候就可以用的是session代理,只记录当时的情况。

 

乱码问题没有解决啊!

 

服务端的代理

1.Ext.data.proxy.Ajax 异步加载的方式

(function(){

    Ext.onReady(function(){

       Ext.regModel("person",{

           fileds:[

              {name:'name',type:'string'}

           ],

       });

       //利用ajax代理来和jsp页面连接,不用上次我们用到的在proxy中嵌套,把ajax和类的模型提取出来来创建

       //里面为ajax的属性

       var ajaxProxy = new Ext.data.proxy.Ajax({

           model:'person',

           url:'extLession/proxy04/person.jsp',

           reader:'json'

       });

       //读取jsp页面的数据

       ajaxProxy.doRequest(new Ext.data.Operation(),function(o){

           var text = o.response.responseText;//得到的是name的值,但是我们要的是一个类的model,所以再通过属性转化一下。

           alert(Ext.JSON.decode(text)['name']);

       });

    });

})();

2.Ext.data.proxy.JsonP  跨域交互的代理

从本地可以跨域到其他的网站上去

(function(){

    Ext.onReady(function(){

       //Ext.data.proxy.JsonP  跨域交互的代理

       Ext.regModel("person",{

           fileds:[

              {name:'name',type:'string'}

           ],

           //跨域的代理

           proxy:{

              type:'jsonp',

              url:'http://www.baidu/extjs.com'

           }

       });

       //初始化类

       var person = Ext.ModelManager.getModel("person");

       person.load(1,{

           scope:this,

           success:function(model){

              alert(model.get('name'));

           }

       });

    });

})();

抱歉!评论已关闭.