EXT前台分页

PagingMemoryProxy 收藏

前因：

项目需要，快速DEMO，采用EXT组件，想在纯HTML+JS的环境下给客户展示分页效果

后果：

example、API都没有找到，想组合Array Grid 和 Paging两个示例，达不到目的...

GG、BAIDU，找到 高手提供 示例链接：http://ido.nl.eu.org/ext-pagingmemoryproxy/

EXT论坛相关帖子：http://extjs.com/forum/showthread.php?p=56759

恩，要学好E文啊！自勉！

附高手扩展的data.proxy的代码：
js 代码

   1. /* 
   2.  * Ext JS Library 1.1 
   3.  * Copyright(c) 2006-2007, Ext JS, LLC. 
   4.  * [e-mail] 
   5.  *  
   6.  * http://www.extjs.com/license 
   7.  */ 
   8.    
   9. /** 
  10.   * Ext.ux.data.PagingMemoryProxy.js 
  11.   * 
  12.   * A proxy for local / in-browser data structures 
  13.   * supports paging / sorting / filtering / etc 
  14.   * 
  15.   * @file   Ext.ux.PagingMemoryProxy.js 
  16.   * @author Ing. Ido Sebastiaan Bas van Oostveen 
  17.   *  
  18.   * @changelog: 
  19.   * @version    1.3 
  20.   * @date       30-September-2007 
  21.   *             - added customFilter config option 
  22.   * @version    1.2  
  23.   * @date   29-September-2007 
  24.   *     - fixed several sorting bugs 
  25.   * @version    1.1 
  26.   * @date   30-August-2007 
  27.   * @version    1.0 
  28.   * @date   22-August-2007 
  29.   * 
  30.   */ 
  31.  
  32. Ext.namespace("Ext.ux");  
  33. Ext.namespace("Ext.ux.data");  
  34.  
  35. /* Fix for Opera, which does not seem to include the map function on Array's */ 
  36. if(!Array.prototype.map){  
  37.     Array.prototype.map = function(fun){  
  38.     var len = this.length;  
  39.     if(typeof fun != "function"){  
  40.         throw new TypeError();  
  41.     }  
  42.     var res = new Array(len);  
  43.     var thisp = arguments[1];  
  44.     for(var i = 0; i < len; i++){  
  45.         if(i in this){  
  46.         res[i] = fun.call(thisp, this[i], i, this);  
  47.         }  
  48.     }  
  49.         return res;  
  50.      };  
  51. }  
  52.  
  53. /* Paging Memory Proxy, allows to use paging grid with in memory dataset */ 
  54. Ext.ux.data.PagingMemoryProxy = function(data, config) {  
  55.     Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);  
  56.     this.data = data;  
  57.     Ext.apply(this, config);  
  58. };  
  59.  
  60. Ext.extend(Ext.ux.data.PagingMemoryProxy, Ext.data.MemoryProxy, {  
  61.     customFilter: null,  
  62.       
  63.     load : function(params, reader, callback, scope, arg) {  
  64.         params = params || {};  
  65.         var result;  
  66.         try {  
  67.             result = reader.readRecords(this.data);  
  68.         } catch(e) {  
  69.             this.fireEvent("loadexception", this, arg, null, e);  
  70.             callback.call(scope, null, arg, false);  
  71.             return;  
  72.         }  
  73.           
  74.         // filtering  
  75.         if (this.customFilter!=null) {  
  76.             result.records = result.records.filter(this.customFilter);  
  77.             result.totalRecords = result.records.length;  
  78.         } else if (params.filter!==undefined) {  
  79.             result.records = result.records.filter(function(el){  
  80.                 if (typeof(el)=="object"){  
  81.                     var att = params.filterCol || 0;  
  82.                     return String(el.data[att]).match(params.filter)?true:false;  
  83.                 } else {  
  84.                     return String(el).match(params.filter)?true:false;  
  85.                 }  
  86.             });  
  87.             result.totalRecords = result.records.length;  
  88.         }  
  89.           
  90.         // sorting  
  91.         if (params.sort!==undefined) {  
  92.             // use integer as params.sort to specify column, since arrays are not named  
  93.             // params.sort=0; would also match a array without columns  
  94.             var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;  
  95.                 var fn = function(r1, r2){  
  96.                 return r1==r2 ? 0 : r1
  97.                 };  
  98.             var st = reader.recordType.getField(params.sort).sortType;  
  99.             result.records.sort(function(a, b) {  
100.                 var v = 0;  
101.                 if (typeof(a)=="object"){  
102.                     v = fn(st(a.data[params.sort]), st(b.data[params.sort])) * dir;  
103.                 } else {  
104.                     v = fn(a, b) * dir;  
105.                 }  
106.                 if (v==0) {  
107.                     v = (a.index < b.index ? -1 : 1);  
108.                 }  
109.                 return v;  
110.             });  
111.         }  
112.  
113.         // paging (use undefined cause start can also be 0 (thus false))  
114.         if (params.start!==undefined && params.limit!==undefined) {  
115.             result.records = result.records.slice(params.start, params.start+params.limit);  
116.         }  
117.           
118.         callback.call(scope, result, arg, true);  
119.     }  
120. });  
121.    

应用示例代码：
js 代码

   1. var Example = {  
   2.     init : function(){  
   3.         // some data yanked off the web  
   4.         var myData = [  
   5.             ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],  
   6.             ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],  
   7.             ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],  
   8.             ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],  
   9.             ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],  
  10.             ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],  
  11.             ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],  
  12.             ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],  
  13.             ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],  
  14.             ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],  
  15.             ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']  
  16.         ];  
  17.  
  18.         var ds = new Ext.data.Store({  
  19.                 proxy: new Ext.ux.data.PagingMemoryProxy(myData),  
  20.                 reader: new Ext.data.ArrayReader({}, [  
  21.                        {name: 'company'},  
  22.                        {name: 'price', type: 'float'},  
  23.                        {name: 'change', type: 'float'},  
  24.                        {name: 'pctChange', type: 'float'},  
  25.                        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}  
  26.                   ])  
  27.         });  
  28.         ds.load();  
  29.  
  30.         // example of custom renderer function  
  31.         function italic(value){  
  32.             return '' + value + '';  
  33.         }  
  34.  
  35.         // example of custom renderer function  
  36.         function change(val){  
  37.             if(val > 0){  
  38.                 return '"color:green;">' + val + '';  
  39.             }else if(val < 0){  
  40.                 return '"color:red;">' + val + '';  
  41.             }  
  42.             return val;  
  43.         }  
  44.         // example of custom renderer function  
  45.         function pctChange(val){  
  46.             if(val > 0){  
  47.                 return '"color:green;">' + val + '%';  
  48.             }else if(val < 0){  
  49.                 return '"color:red;">' + val + '%';  
  50.             }  
  51.             return val;  
  52.         }  
  53.  
  54.         // the DefaultColumnModel expects this blob to define columns. It can be extended to provide  
  55.         // custom or reusable ColumnModels  
  56.         var colModel = new Ext.grid.ColumnModel([  
  57.             {id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},  
  58.             {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},  
  59.             {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},  
  60.             {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},  
  61.             {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}  
  62.         ]);  
  63.  
  64.  
  65.         // create the Grid  
  66.         var grid = new Ext.grid.Grid('grid-example', {  
  67.             ds: ds,  
  68.             cm: colModel,  
  69.             autoExpandColumn: 'company',  
  70.             selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),  
  71.             enableColLock:false,  
  72.             enableDragDrop:false,  
  73.             loadMask: true 
  74.         });  
  75.           
  76.         var layout = Ext.BorderLayout.create({  
  77.             center: {  
  78.                 margins:{left:3,top:3,right:3,bottom:3},  
  79.                 panels: [new Ext.GridPanel(grid)]  
  80.             }  
  81.         }, 'grid-panel');  
  82.  
  83.         grid.render();  
  84.  
  85.  
  86.         var gridFooter = grid.getView().getFooterPanel(true);  
  87.         var paging = new Ext.PagingToolbar(gridFooter, ds, {  
  88.                         pageSize: 5,  
  89.                         displayInfo: true,  
  90.                         displayMsg: '当前记录 {0} - {1} ，共 {2}',  
  91.                         emptyMsg: "No queues to display" 
  92.                     });  
  93.         ds.load({params:{start:0, limit:5}});  
  94.           
  95.           
  96.     }  
  97. };  
  98. Ext.onReady(Example.init, Example); 

附：

在EXT2.0里，已经不支持 grid.getView().getFooterPanel(true) 啦。直接作为bbr定义在Ext.grid.GridPanel里。