PagingToolbarResizer.js的使用注意事项！ (转)
GRID应该是EXTJS中使用最频繁的组件了，通过JSON可以实现分页显示。
笔者通过使用Ext.ux.plugin.PagingToolbarResizer插件，可以实现客户自定义每页显示的记录数（类似的插件还比较多）
插件代码：
1 Ext.namespace('Ext.ux.plugin'); 2 Ext.ux.plugin.PagingToolbarResizer = Ext.extend(Object, { 3 options: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000], 4 mode: 'remote', 5 displayText: '记录数', 6 prependCombo: false, 7 constructor: function(config){ 8 Ext.apply(this, config); 9 Ext.ux.plugin.PagingToolbarResizer.superclass.constructor.call(this, config); 10 }, 11 12 init : function(pagingToolbar) { 13 var comboStore = this.options; 14 15 var combo = new Ext.form.ComboBox({ 16 typeAhead: false, 17 triggerAction: 'all', 18 forceSelection: true, 19 selectOnFocus:true, 20 lazyRender:true, 21 editable: false, 22 mode: this.mode, 23 value: pagingToolbar.pageSize, 24 width:50, 25 store: comboStore, 26 listeners: { 27 select: function(combo, value, i){ 28 pagingToolbar.pageSize = comboStore[i]; 29 pagingToolbar.doLoad(Math.floor(pagingToolbar.cursor/pagingToolbar.pageSize)*pagingToolbar.pageSize); 30 } 31 } 32 }); 33 34 var index = 0; 35 36 if (this.prependCombo){ 37 index = pagingToolbar.items.indexOf(pagingToolbar.first); 38 index--; 39 } else{ 40 index = pagingToolbar.items.indexOf(pagingToolbar.refresh); 41 pagingToolbar.insert(++index,'-'); 42 } 43 44 pagingToolbar.insert(++index, this.displayText); 45 pagingToolbar.insert(++index, combo); 46 47 if (this.prependCombo){ 48 pagingToolbar.insert(++index,'-'); 49 } 50 51 //destroy combobox before destroying the paging toolbar 52 pagingToolbar.on({ 53 beforedestroy: function(){ 54 combo.destroy(); 55 } 56 }); 57 58 } 59 });
------------
插件使用方式：
1 bbar:new Ext.PagingToolbar( 2 { 3 pageSize:limit, 4 store:ds, 5 displayInfo:true, 6 emptyMsg:"没有登记文件", 7 plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [20, 40,60,80,100,200,500,1000], prependCombo: true})], 8 displayMsg:'显示第 {0} 条到 {1} 条文件，一共 {2} 个文件' 9 }),
...
---------------
使用界面：
实际GRID在使用中，经常会进行查询操作，如果处理不当回出现，用户定义的分页记录发生改变
笔者是这样处理的
1：定义每页显示的记录数量至一变量
2：在插件PagingToolbar的change事件进行监听，改变分页变量值
代码如下：
var limit=20;
...
bbar:new Ext.PagingToolbar(
...
{"change":function (t,p)
{limit=this.pageSize;
}
},
...
ds.removeAll();
start=0;
ds.reload({params:start:start,limit:limit}})
...
