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. * 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里。