extJS控件之每页显示N条记录
这是一个分页的控件，可以选择每页显示N条记录，就是在分页工具栏里面加个下拉框来选择显示的记录数。这个控件也是我从ext的官方论坛上偷下来的嘿嘿。不说了，代码如下
Ext.namespace('Ext.ux.Andrie');
/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - [email protected] / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};
Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',
/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',
/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',
/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,
/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,
/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],
/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,
init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},
//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},
//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},
setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
}else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.field.dom.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
}else{
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},
//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
}),
displayField:'pageSize',
valueField:'pageSize',
mode:'local',
triggerAction:'all',
width:50,
xtype:'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.updateStore();
if (this.addBefore){
this.pagingToolbar.add(this.addBefore);
}
if (this.beforeText){
this.pagingToolbar.add(this.beforeText);
}
this.pagingToolbar.add(this.combo);
if (this.afterText){
this.pagingToolbar.add(this.afterText);
}
if (this.addAfter){
this.pagingToolbar.add(this.addAfter);
}
}
})
看不懂吧？不用看懂，只要知道关键部位就可以了！哎，我又开始不求甚解了！ 看看怎么调用吧？
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPageSize(),
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
例子下载地址如下http://download.csdn.net/source/526365