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.  * licensing@extjs.com  
  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里。

展开阅读全文

关于EXT中PagingMemoryProxy求助

07-05

首先贴个源代码:rn var columns = [rn header: "学科类别", dataIndex: "lb", sortable: true ,rn header: "课程编号", dataIndex: "kcbh", sortable: true ,rn header: "课程名称", dataIndex: "kcmc", sortable: true ,rn header: "学时", dataIndex: "xs", sortable: true ,rn header: "学分", dataIndex: "xf", sortable: true ,rn header: "开课学期", dataIndex: "kkxq", sortable: true,renderer:function(v)return ""+v+"" rn ];rn var reader = new Ext.data.JsonReader(, [rn name: 'lb' ,rn name: 'kcbh' ,rn name: 'kcmc' ,rn name: 'xs' ,rn name: 'xf' ,rn name: 'kkxq' ,rn name: 'kkxy' ,rn name: 'khfs' ,rn name: 'bz' rn ]);rn var vstore=new Ext.data.JsonStore(rn data:data1 ,rn fields: ["zydm", "zymc", "kclb", "xkzdfs"]rn );rnrn var store = new Ext.data.GroupingStore(rn reader: reader,rn proxy: new Ext.data.PagingMemoryProxy(data),rn groupField: 'lb',rn sortInfo: field: 'kcbh', direction: "ASC" rn );rn var grid1=new Ext.grid.GridPanel(rn title:"研究生专业培养方案 ",rn store: vstore,rn loadmask:true,rn clicksToEdit: 1,rn width: 600,rn renderTo: document.body,rn columns: [rn header: "专业代码", dataIndex: "zydm", sortable: true,width:150 ,rn header: "专业名称", dataIndex: "zymc", sortable: true, width:150,rn header: "课程类别", dataIndex: "kclb", sortable: true, width:150,rn header: "选课最低分数", dataIndex: "xkzdfs",rn sortable: true,rn renderer: function (v) return "" + v + "" ,width:145rn rn ]);rn rn var grid = new Ext.grid.GridPanel(rn autoHeight: true,rn store: store,rn layout: 'fit',rn autoHeight: true,rn loadmask: true,rn bbar:new Ext.PagingToolbar(rn pagesize:5,rn store:store,rn displayInfo:true,rn displayMsg:'显示第0条到1条记录,一共2条',rn empty:"没有记录"rn ),rn columns: columns,rn view: new Ext.grid.GroupingView(),rn renderTo: document.bodyrn );rn store.load( params: start: 0, limit: 5 );rn );rnrn在store中使用了PagingMemoryProxy进行静态分页,但是页面表格的显示没有进行分页,但是只显示了我所设定的PAGESIZE:5页的数据,是不是PagingMemoryProxy不支持JSON的数据分页,去解决 论坛

ext store 使用PagingMemoryProxy 把数据存储在缓存中,删除数据的时候怎么删除缓存中的这个数据

05-28

Ext.onReady(function()rn var sm = new Ext.grid.CheckboxSelectionModel();rn var cm = new Ext.grid.ColumnModel([sm, header:'编号',dataIndex:'id',hidden:true, header:'名称',dataIndex:'name',header:'描述',dataIndex:'descn' ]);rn var data = [rn ['1','赖恒','descn1'],['2','狗蛋','descn2'],['3','杨小鹏','descn3'],['4','王颖','descn4'],rn ['5', '浴缸', 'descn5'], ['6', '焦一棍', 'descn5'],['7', '简阳', 'descn5'],['8', 'IB', 'descn5'],rn ['9', '猪妹妹', 'descn5'],['10', '阿道克', 'descn5']rn ];rn var store = new Ext.data.Store(rn //proxy: new Ext.data.PagingMemoryProxy(data),rn autoLoad:false,rn reader: new Ext.data.ArrayReader(, [rn name: 'id',rn name: 'name',rn name: 'descn'rn ])rn );rn store.proxy = new Ext.data.PagingMemoryProxy(data),//PagingMemoryProxy() 一次性读取数据rnstore.load(params:start:0,limit:3);//按5条记rn //store.load();rnrn var grid = new Ext.grid.GridPanel(rn renderTo: 'grid',rn autoHeight: true,rn store: store,rn sm:sm,rn cm: cm,rn tbar : [rn text : '选中删除',rn handler : function(btn, pressed) rn rn var row = grid.getSelectionModel().getSelections();// 选择行的个数rn if (row.length == 0) rn Ext.Msg.alert("提示信息", "请您至少选择一个!");rn rn else if (row.length > 1) rn Ext.Msg.alert("提示信息", "对不起只能选择一个!");rn rn else if (row.length == 1) rn var ids = row[0].get("id");rn //删除缓存 rn rn rnrn ],rn bbar: new Ext.PagingToolbar(rn store : store, // 数据源rn pageSize:3,rn displayInfo : true,rnrn displayMsg : '当前记录 0 -- 1 条 共 2 条记录',rnrn emptyMsg : '当前没有数据可以显示',rnrn beforePageText : "第",rnrn afterPageText : "页 共0页",rnrn beforeChooseText : "共0条记录 每页显示",rnrn afterChooseText : "条记录",rnrn firstText : "第一页",rnrn prevText : "前一页",rnrn nextText : "后一页",rnrn lastText : "最后一页",rnrn refreshText : "刷新"rn )rn );rn //store.load(params:start:0,limit:2);rn);rnrn源码附上,还请高人帮忙指导一下,谢谢 论坛

没有更多推荐了,返回首页