PagingToolbarResizer.js的使用注意事项！ (转)

GRID应该是EXTJS中使用最频繁的组件了，通过JSON可以实现分页显示。

笔者通过使用Ext.ux.plugin.PagingToolbarResizer插件，可以实现客户自定义每页显示的记录数（类似的插件还比较多）

插件代码：

Ext.namespace('Ext.ux.plugin');
Ext.ux.plugin.PagingToolbarResizer = Ext.extend(Object, {
options: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000],
mode: 'remote',
displayText: '记录数',
prependCombo: false,
constructor: function(config){
Ext.apply(this, config);
Ext.ux.plugin.PagingToolbarResizer.superclass.constructor.call(this, config);
},

init : function(pagingToolbar) {
var comboStore = this.options;

var combo = new Ext.form.ComboBox({
typeAhead: false,
triggerAction: 'all',
forceSelection: true,
selectOnFocus:true,
lazyRender:true,
editable: false,
mode: this.mode,
value: pagingToolbar.pageSize,
width:50,
store: comboStore,
listeners: {
select: function(combo, value, i){
pagingToolbar.pageSize = comboStore[i];
pagingToolbar.doLoad(Math.floor(pagingToolbar.cursor/pagingToolbar.pageSize)*pagingToolbar.pageSize);
}
}
});

var index = 0;

if (this.prependCombo){
index = pagingToolbar.items.indexOf(pagingToolbar.first);
index--;
} else{
index = pagingToolbar.items.indexOf(pagingToolbar.refresh);
pagingToolbar.insert(++index,'-');
}

pagingToolbar.insert(++index, this.displayText);
pagingToolbar.insert(++index, combo);

if (this.prependCombo){
pagingToolbar.insert(++index,'-');
}

//destroy combobox before destroying the paging toolbar
pagingToolbar.on({
beforedestroy: function(){
combo.destroy();
}
});

}
});

------------
插件使用方式：

bbar:new Ext.PagingToolbar(
{
pageSize:limit,
store:ds,
displayInfo:true,
emptyMsg:"没有登记文件",
plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [20, 40,60,80,100,200,500,1000], prependCombo: true})],
displayMsg:'显示第 {0} 条到 {1} 条文件，一共 {2} 个文件'
}),

...

---------------
使用界面：



实际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}})

...