中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
extjs4 各種proxy reader詳細使用

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.               //創(chuàng)建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'));  

 當 關閉瀏覽器,從今瀏覽此頁面后,效果圖:

說明,localstorage 是長期存儲數據的,即使關閉瀏覽器,數據仍然存在.

下面還要說明一點:LocalStorage代理如果沒有指定id,則會使用 store的id,如果兩個都沒指點,那么就會拋出異常

 

 

Ext.data.proxy.SessionStorage

效果:

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'));

 

;

當關閉瀏覽器,從新瀏覽此頁面時:

.

里面的數據沒有增加,驗證了剛才的說法.

服務器端代理

服務器端代理會訪問遠程服務器資源,適合于長期保存重要的數據資料.

下面是 分頁參數

//定義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.            //創(chuàng)建請求參數對象  
  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);  //發(fā)起請求  
  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'}]} 

排序參數

參數信息:

只需更改 上面程序的 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.             });  
 

自定義排序參數:

 

 

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.            }   
 

過濾器參數

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

自定義過濾器參數 :

暫留

分組參數

 

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實例

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,所以 執(zhí)行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數據讀取器

數據讀取器的作用就是 將 數據代理 讀取到的  原始數據 按照不同的規(guī)則進行解析,將解析后的數據

保存到Model模型對象 中,.

extJS主要數據解析器為:

1.Json數據讀取器

2.XML數據讀取器

3.數組數據讀取器

Json讀取器:

 

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.             //創(chuàng)建 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數據:

 

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.             //創(chuàng)建 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.    
 

數組讀取器

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寫入器使用:

 

 

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寫入器

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

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'));  
 
本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Ext.data 中常用proxy
ExtJS 4.2 教程-06:服務器代理(proxy)
EXTJS4 新特性之Ext.data.Model
Ext框架的Grid使用介紹
ext表格控件
ext3中Ext.form.ComboBox默認值的設置
更多類似文章 >>
生活服務
熱點新聞
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服