logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

extjs4 各种proxy reader详细使用

 旭龙 2013-02-04

ExtJS提供的数据代理主要分为两大类:

1.客户端代理 (Ext.data.proxy.Client)

2.服务器代理(Ext.data.proxy.Server)

这两个类 都继承自 Ext.data.proxy.Proxy ,

客户端代理主要包括:Memory   WebStorage   SessionStorage   LocalStorage

服务器端代理包括:  Ajax   Rest  JsonP

Js代码  收藏代码
  1. Ext.data.proxy.Memory  
  2.   
  3.     //this is the model we will be using in the store  
  4.               Ext.define('User', {  
  5.                   extend: 'Ext.data.Model',  
  6.                   fields: [  
  7.           { name: 'id', type: 'int' },  
  8.           { name: 'name', type: 'string' },  
  9.           { name: 'phone', type: 'string', mapping: 'phoneNumber' }  
  10.       ]  
  11.               });  
  12.   
  13.               //this data does not line up to our model fields - the phone field is called phoneNumber  
  14.               var datas = {  
  15.                   users: [  
  16.           {  
  17.               id: 1,  
  18.               name: 'Ed Spencer',  
  19.               phoneNumber: '555 1234'  
  20.           },  
  21.           {  
  22.               id: 2,  
  23.               name: 'Abe Elias',  
  24.               phoneNumber: '666 1234'  
  25.           }  
  26.       ]  
  27.               };  
  28.   
  29.   
  30.               //创建memory代理  
  31.               var memProxy = new Ext.data.proxy.Memory({  
  32.   
  33.                   model: 'User',  
  34.                   reader: { root: 'users' },  
  35.                   data: datas  
  36.   
  37.               });  
  38.               //读取数据  
  39.               memProxy.read(new Ext.data.Operation(), function (result) {  
  40.   
  41.                   var total = result.resultSet.total;  
  42.                   alert("数据总条数为:" + total);  
  43.   
  44.               })   
 

DOM Storage 分为两类, sessionStorage 和 localStorage

sessionStorage: 用于存储与 当前浏览器窗口关联的数据.窗口关闭后,sessionStorage中数据将无法使用

localStorage:      用于长期存储数据.窗口关闭,数据仍然可以访问, 所有浏览器窗口可以共享 数据.

 

下面看看一个 localStorage的例子


Js代码  收藏代码
  1. Ext.define('Search', {  
  2.                 fields: ['id', 'query'],  
  3.                 extend: 'Ext.data.Model',  
  4.                 proxy: {  
  5.                     type: 'localstorage',  
  6.                     id: 'twitter-Searches'  
  7.                 }  
  8.             });  
  9.   
  10.             var store = new Ext.data.Store({  
  11.                 model: "Search"  
  12.             });  
  13.   
  14.             //添加数据  
  15.             store.add({ query: 'Sencha Touch' });  
  16.             store.add({ query: 'Ext JS' });  
  17.             //保存数据  
  18.             store.sync();  
  19.   
  20.             //读取数据  
  21.             store.load();  
  22.   
  23.             var msg = [];  
  24.             store.each(function (data) {  
  25.                 msg.push(data.get('id') + '-' + data.get('query'));  
  26.   
  27.             })  
  28.             alert(msg.join('\n'));  

 当 关闭浏览器,从今浏览此页面后,效果图:image

说明,localstorage 是长期存储数据的,即使关闭浏览器,数据仍然存在.

下面还要说明一点:LocalStorage代理如果没有指定id,则会使用 store的id,如果两个都没指点,那么就会抛出异常

 

 

Ext.data.proxy.SessionStorage

效果:image

Ext.define('Search', {
               fields: ['id', 'query'],
               extend: 'Ext.data.Model',
               proxy: {
                   type: 'sessionstorage',
                   id: 'twitter-Searches'
               }
           });

           var store = new Ext.data.Store({
               model: "Search"
           });

           //添加数据
           store.add({ query: 'Sencha Touch' });
           store.add({ query: 'Ext JS' });
           //保存数据
           store.sync();

           //读取数据
           store.load();

           var msg = [];
           store.each(function (data) {
               msg.push(data.get('id') + '-' + data.get('query'));

           })
           alert(msg.join('\n'));

 

;

当关闭浏览器,从新浏览此页面时:image .

里面的数据没有增加,验证了刚才的说法.

服务器端代理

服务器端代理会访问远程服务器资源,适合于长期保存重要的数据资料.

下面是 分页参数

image

//定义User模型

 

Js代码  收藏代码
  1. Ext.define('User', {  
  2.                extend: 'Ext.data.Model',  
  3.                fields: ['id', 'name', 'email']  
  4.            });  
  5.   
  6.             //定义数据代理  
  7.            var proxy = new Ext.data.proxy.Ajax({  
  8.                model: 'User',  
  9.                url: 'Handler.ashx',  
  10.                reader: {  
  11.                    type: 'json',   //jsonReader  
  12.                    root: 'users'  
  13.                }  
  14.            });  
  15.   
  16.            //创建请求参数对象  
  17.   
  18.              var operation = new Ext.data.Operation({  
  19.   
  20.                page: 2,  
  21.                start: 10,  
  22.                limit: 20,  
  23.                action: 'read'   //请求动作  
  24.   
  25.            });  
  26.   
  27.            proxy.doRequest(operation, callback);  //发起请求  
  28.            function callback(operation) { //请求的回调函数  
  29.                //获取服务器返回的原始数据  
  30.                var reText = operation.response.responseText;  
  31.                //获取记录总数  
  32.                var totalRecords = operation.resultSet.totalRecords;  
  33.                //获取记录数组  
  34.                var records = operation.resultSet.records;  
  35.                alert(totalRecords);  
  36.   
  37.   
  38.            }   

 服务器返回的数据:  {users:[{id:'" + id + "',name:'gao'}]} 

排序参数

参数信息:image

只需更改 上面程序的 operation配置即可

 

Js代码  收藏代码
  1. var operation = new Ext.data.Operation({  
  2.   
  3.                 sorters: [  
  4.                 new Ext.util.Sorter({  
  5.                     property: 'id',  
  6.                     direction: 'ASC'  //DESC  
  7.                 })  
  8.                 ],  
  9.   
  10.                 action: 'read'  
  11.   
  12.             });  
 

自定义排序参数:

image

 

 

Js代码  收藏代码
  1. Ext.define('User', {  
  2.                extend: 'Ext.data.Model',  
  3.                fields: ['id', 'name', 'email']  
  4.            });  
  5.   
  6.   
  7.            var proxy = new Ext.data.proxy.Ajax({  
  8.                model: 'User',  
  9.                url: 'Handler.ashx',  
  10.                reader: {  
  11.                    type: 'json',  
  12.                    root: 'users'  
  13.                },  
  14.   
  15.                sortParam: 'sortParam',  //自定义排序参数名称  
  16.   
  17.                encodeSorters: function (sorters) {//排序参数的数组,返回一个JSON-encodes的字符串  
  18.   
  19.                    var length = sorters.length,  
  20.                    sortArray = [],   //定义参数数组  
  21.                    sorter, i;  
  22.                    for (var i = 0; i < length; i++) {  
  23.   
  24.                        sorter = sorters[i];  
  25.                        sortArray[i] = sorter.property + '#' + sorter.direction;  
  26.   
  27.                    }  
  28.                    return sortArray.join(",");  
  29.   
  30.    
  31.   
  32.                }  
  33.            });  
  34.   
  35.            var operation = new Ext.data.Operation({  
  36.   
  37.                sorters: [  
  38.                new Ext.util.Sorter({  
  39.                    property: 'id',  
  40.                    direction: 'ASC'  //DESC  
  41.                }),  
  42.                new Ext.util.Sorter({  
  43.                    property: 'age',  
  44.                    direction: 'DESC'  
  45.                })  
  46.   
  47.                ],  
  48.   
  49.                action: 'read'  
  50.   
  51.            });  
  52.   
  53.            proxy.doRequest(operation, callback);  
  54.            function callback(operation) {  
  55.                //获取服务器返回的原始数据  
  56.                var reText = operation.response.responseText;  
  57.                //获取记录总数  
  58.                var totalRecords = operation.resultSet.totalRecords;  
  59.                //获取记录数组  
  60.                var records = operation.resultSet.records;  
  61.                alert(totalRecords);  
  62.   
  63.   
  64.            }   
 

过滤器参数

image

Java代码  收藏代码
  1. var operation = new Ext.data.Operation({  
  2.   
  3.                 filters: [  
  4.               new Ext.util.Filter({  
  5.   
  6.                   property: 'id',  
  7.                   value: '2'  
  8.               })  
  9.               ]  
  10.               ,  
  11.   
  12.                 action: 'read'  
  13.   
  14.             });   
 

自定义过滤器参数 :

暂留

分组参数

image

 

Js代码  收藏代码
  1. var operation = new Ext.data.Operation({  
  2.   
  3.                 groupers: [  
  4.   
  5.                     new Ext.util.Grouper({  
  6.                      
  7.                     property:'age',  
  8.                     direction:'ASC'  
  9.                     })  
  10.                  
  11.                 ]  
  12.               ,  
  13.   
  14.                 action: 'read'  
  15.   
  16.             });  
  17.   
  18.    
 

Ext.data.proxy.Rest实例

image

Js代码  收藏代码
  1. Ext.regModel('User', {  
  2.   
  3.                fields: ['id', 'name', 'age'],  
  4.                proxy: {  
  5.   
  6.                    type: 'rest',  //使用Ext.data.proxy.Rest代理  
  7.                    url: 'Handler.ashx'  
  8.                }  
  9.   
  10.            });  
  11.   
  12.            var u1 = Ext.ModelManager.create({ name: 'gao', age: 12 }, 'User');  
  13.            u1.save();  //因为没有id所以调用 create方法  
  14.   
  15.            var u2 = Ext.ModelManager.create({ id: 10, name: 'gao2', age: 12 }, 'User');  
  16.            u2.save();   //因为有id,所以 执行update  
  17.            var u3 = Ext.ModelManager.getModel('User');  
  18.            u3.load(100); //调用read方法 ,读取id等于300的数据  
  19.            var u4 = Ext.ModelManager.create({ id: 300, name: 'gao4', age: 11 }, 'User');  
  20.            u4.destroy();  //  
  21.   
  22. data.proxy.JsonP  
 

暂留

Reader数据读取器

数据读取器的作用就是 将 数据代理 读取到的  原始数据 按照不同的规则进行解析,将解析后的数据

保存到Model模型对象 中,.

extJS主要数据解析器为:

1.Json数据读取器

2.XML数据读取器

3.数组数据读取器

Json读取器:

image

 

Js代码  收藏代码
  1. var userdata = {  
  2.   
  3.                 "total": 2000,  
  4.                 "users": [  
  5.                             {  
  6.                                 "id": 22,  
  7.                                 "name": "gao",  
  8.                                 "orders": [  
  9.                                                 {  
  10.                                                     "id": 30,  
  11.                                                     "total": 100  
  12.                                                 },  
  13.                                                  {  
  14.                                                      "id": 320,  
  15.                                                      "total": 1002  
  16.                                                  }  
  17.                                            ]  
  18.   
  19.                             }  
  20.                         ]  
  21.   
  22.   
  23.             }  
  24.             //定义用户模型  
  25.             Ext.regModel('User', {  
  26.   
  27.                 fields: ['id', 'name'],  
  28.                 hasMany: 'Order'  
  29.   
  30.             });  
  31.             //定义订单模型  
  32.             Ext.regModel("Order", {  
  33.   
  34.                 fields: ["id", "total"],  
  35.                 belongTo: 'User'  //定义 order和user之间的多对一关系  
  36.             })  
  37.   
  38.             //创建 memory代理  
  39.             var meoProxy = new Ext.data.proxy.Memory({  
  40.   
  41.                 model: 'User',  
  42.                 reader: {  
  43.   
  44.                     type: 'json',  
  45.                     root: 'users'  
  46.                 },  
  47.                 data: userdata  
  48.   
  49.             })  
  50.   
  51.             //读取数据  
  52.             meoProxy.read(new Ext.data.Operation(), callBack);  
  53.             function callBack(res) {  
  54.                 //获取总数据数  
  55.                 var count = res.resultSet.total;  
  56.                 //获取第一个用户信息  
  57.                 var user = res.resultSet.records[0];  
  58.                 //获取该用户的第一个账单信息  
  59.                 var order = user.orders().getAt(1);  
  60.                 alert("总数据数:" + count + '\n姓名:' + user.get('name') + '\n账单金额:' + order.get('total'));  
  61.   
  62.             }  
  63.   
  64. 读取复杂的json数据:  
 

读取复杂的json数据:

image

 

Js代码  收藏代码
  1. 代码:  
  2.   
  3. var userdata = {  
  4.   
  5.   
  6.                 "users": [  
  7.                             {  
  8.                                 "id": 22,  
  9.                                 "name": "gao",  
  10.                                 "info": { "id": 22, "name": "gaoyu" }  
  11.   
  12.                             }  
  13.                         ]  
  14.   
  15.   
  16.             }  
  17.             //定义用户模型  
  18.             Ext.regModel('User', {  
  19.   
  20.                 fields: ['id', 'name']  
  21.   
  22.             });  
  23.   
  24.             //创建 memory代理  
  25.             var meoProxy = new Ext.data.proxy.Memory({  
  26.   
  27.                 model: 'User',  
  28.                 reader: {  
  29.   
  30.                     type: 'json',  
  31.                     root: 'users',  
  32.                     record: 'info'      //定位有效数据的位置  
  33.                 },  
  34.                 data: userdata  
  35.   
  36.             })  
  37.   
  38.             //读取数据  
  39.             meoProxy.read(new Ext.data.Operation(), callBack);  
  40.             function callBack(res) {  
  41.                 //获取第一个用户信息  
  42.                 var dd = res.resultSet.records[0];  
  43.                 alert('姓名:' + dd.get('name'));  
  44.   
  45.             }  
  46.   
  47.    
 

数组读取器

image

Js代码  收藏代码
  1. //定义用户模型  
  2. Ext.regModel('User', {  
  3.   
  4.     fields: ['id', 'name'],  
  5.     proxy: //定义代理  
  6.     {  
  7.         type: 'ajax',  
  8.         url: 'Handler.ashx',  
  9.         reader: {  
  10.             type: 'array'   //读取器类型为 数组  
  11.         }  
  12.     }  
  13.   
  14. });  
  15. var user = Ext.ModelManager.getModel('User');  
  16. //通过代理读取数据  
  17. user.load(1, {  
  18.   
  19.     success: function (res) {  
  20.   
  21.         alert(res.get('id'));  
  22.     }  
  23. })  
  24.   
  25.    
  26.   
  27. 服务器返回数据:  [[1,\'nill\']]  
 

Writer数据写入器

主要用于将 数据代理 提交到服务端 的数据进行编码,.

主要写入器,有  JSON写入器和XML写入器

Json写入器使用:

image

 

 

Js代码  收藏代码
  1. //定义用户模型  
  2.         Ext.regModel('User', {  
  3.   
  4.             fields: ['id', 'name'],  
  5.             proxy: //定义代理  
  6.             {  
  7.             type: 'ajax',  
  8.             url: 'Handler.ashx',  
  9.             writer: {  
  10.                 type: 'json'   //写入为json格式  
  11.             }  
  12.         }  
  13.   
  14.     });  
  15.     var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User');  
  16.     user.save({  
  17.         success: function () { alert('save succeed!') },  
  18.         failure: function () { alert('save failed!') }  
  19.   
  20.     })  
 

XML写入器

image

Java代码  收藏代码
  1. //定义用户模型  
  2.            Ext.regModel('User', {  
  3.   
  4.                fields: ['id', 'name'],  
  5.                proxy: //定义代理  
  6.                {  
  7.                type: 'ajax',  
  8.                url: 'Handler.ashx',  
  9.                writer: {  
  10.                    type: 'xml'   //写入为json格式  
  11.                }  
  12.            }  
  13.   
  14.        });  
  15.        var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User');  
  16.        user.save({  
  17.            success: function () { alert('save succeed!') },  
  18.            failure: function () { alert('save failed!') }  
  19.   
  20.        })  
 

遍历store

image

Js代码  收藏代码
  1. //定义用户模型  
  2.           Ext.regModel('User', {  
  3.   
  4.               fields: ['id', 'name'],  
  5.               proxy: //定义代理  
  6.               {  
  7.               type: 'memory'  
  8.   
  9.   
  10.           }  
  11.       })  
  12.       var store = new Ext.data.Store({  
  13.           autoLoad: true,  
  14.           data: [{ id: 12, name: 'ss' }, { id: 11, name: 'zz'}],  
  15.           model: 'User'  
  16.   
  17.   
  18.       })  
  19.       //遍历store中元素  
  20.       var msg = ['遍历:'];  
  21.       store.each(function (res) {  
  22.   
  23.           msg.push('id=' + res.get('id') + 'name=' + res.get('name'));  
  24.       })  
  25.       alert(msg.join('\n'));  
 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 旭龙 > 《modelstore》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多