ExtJS 分页扩展

Ext.namespace('Ext.ux.grid')
Ext.ux.grid.PagingToolbarExp = function(config) {
var config = config || {};
this.everyPageCount = config.everyPageCount || 7;
this.everyPageSizeData = [ ['5', 5], ['10', 10], ['20', 20],
['50', 50], ['100', 100]];
if (config.everyPageSizeData) {
Ext.apply(this.everyPageSizeData, config.everyPageSizeData);
}
Ext.ux.grid.PagingToolbarExp.superclass.constructor.call(this, config);
this.initAction();
}

var T = Ext.Toolbar;
Ext.extend(Ext.ux.grid.PagingToolbarExp, Ext.PagingToolbar, {
displayMsg : "显示 第 【{0}】 条到 【{1}】 条记录，一共 【{2}】 条",
emptyMsg : "没有记录",
beforePageText : '页码',
afterPageText : '总页数【{0}】',
firstText : '首页',
prevText : '上一页',
nextText : '下一页',
lastText : '末页',
refreshText : '刷新',
initAction : function() {

},
initComponent : function() {
var pagingItems = [this.first = new T.Button({
tooltip : this.firstText,
overflowText : this.firstText,
iconCls : 'x-tbar-page-first',
disabled : true,
handler : this.moveFirst,
scope : this
}), this.prev = new T.Button({
tooltip : this.prevText,
overflowText : this.prevText,
iconCls : 'x-tbar-page-prev',
disabled : true,
handler : this.movePrevious,
scope : this
}), '-', this.beforePageText,
this.inputItem = new Ext.form.NumberField({
cls : 'x-tbar-page-number',
allowDecimals : false,
allowNegative : false,
enableKeyEvents : true,
selectOnFocus : true,
submitValue : false,
listeners : {
scope : this,
keydown : this.onPagingKeyDown,
blur : this.onPagingBlur
}
}), '-',
'每页 ', this.pageSizeCombox = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['text', 'value'],
data : this.everyPageSizeData
}),
mode : 'local',
displayField : 'text',
valueField : 'value',
editable : false,
scope : this,
allowBlank : false,
triggerAction : 'all',
value : this.pageSize,
listWidth : 45,
width : 45,
listeners : {
scope : this,
select : this.gotoSelectPage

}
}), ' 条', this.afterTextItem = new T.TextItem({
text : String.format(this.afterPageText, 1)
}), '-', this.next = new T.Button({
tooltip : this.nextText,
overflowText : this.nextText,
iconCls : 'x-tbar-page-next',
disabled : true,
handler : this.moveNext,
scope : this
}), this.last = new T.Button({
tooltip : this.lastText,
overflowText : this.lastText,
iconCls : 'x-tbar-page-last',
disabled : true,
handler : this.moveLast,
scope : this
}), '-', this.refresh = new T.Button({
tooltip : this.refreshText,
overflowText : this.refreshText,
iconCls : 'x-tbar-loading',
handler : this.doRefresh,
scope : this
}), '-', this.panelMe = new Ext.Panel({
id : 'pageBarItems',
html : this.pageSpliter()

})];

var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
} else {
this.items = pagingItems.concat(userItems);
}
delete this.buttons;
if (this.displayInfo) {
this.items.push('->');
this.items.push(this.displayItem = new T.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);
this.addEvents('change', 'beforechange');
this.on('afterlayout', this.onFirstLayout, this, {
single : true
});
this.cursor = 0;
this.bindStore(this.store, true);
},
onLoad : function(store, r, o) {
if (!this.rendered) {
this.dsLoaded = [store, r, o];
return;
}
var p = this.getParams();
this.cursor = (o.params && o.params[p.start]) ? o.params[p.start] : 0;
var d = this.getPageData(), ap = d.activePage, ps = d.pages;
this.afterTextItem.setText(String.format(this.afterPageText, d.pages));

Ext.getCmp('pageBarItems').getEl().dom.innerHTML = this.pageSpliter(
d.activePage, d.pages);

this.inputItem.setValue(ap);
this.first.setDisabled(ap == 1);
this.prev.setDisabled(ap == 1);
this.next.setDisabled(ap == ps);
this.last.setDisabled(ap == ps);
this.refresh.enable();

this.updateInfo();
this.fireEvent('change', this, d);
},
/**
*
* @param {}
* activePage 当前去向多少页
* @param {}
* totalPage 总页数
* @return {}
*/
pageSpliter : function(activePage, totalPage) {
var p = [];
var flag = false;
var halfFlag = false;
var mybarId = this.getId();
var firstStart = 1;
var lastEnd = this.everyPageCount;

p.push('       第: 【');
var start;
var limit;

if (this.everyPageCount % 2 == 0) {

this.halfMidile = parseInt((this.everyPageCount) / 2); // 中间数的一半
start = activePage - this.halfMidile;
if (start <= 0) {
start = 1;
}
limit = activePage + this.halfMidile;
if (limit <= this.everyPageCount) {
limit = this.everyPageCount + 1;
}
if (limit > totalPage) {
limit = totalPage + 1;
}

} else {

this.halfMidile = parseInt((this.everyPageCount + 1) / 2); // 中间数的一半
// 3
start = activePage - this.halfMidile + 1;
if (start <= 0) {
start = 1;
}

limit = activePage + this.halfMidile;
if (limit <= this.everyPageCount) {
limit = this.everyPageCount + 1;
}

if (limit > totalPage) {
limit = totalPage + 1;
}

}
for (var i = start; i < limit; i++) {
flag = true;
p.push("<a href='javascript:void(0)' class='x-btn-over' style='padding-top:1px;padding-left:2px;padding-bottom:10px;font-weight: bold;font-size : 12px;' οnclick=Ext.getCmp('"
+ mybarId
+ "').gotoPage(this.innerHTML) > "
+ i
+ " </a>");
}

p.push(' 】页');

if (flag) {
return p.join('');
} else {
return '';
}

},
gotoSelectPage : function() {

this.pageSize = this.pageSizeCombox.getValue();
this.inputItem.setValue(1);// 重新设置页码
var pageToNum = this.inputItem.getValue();
this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);
this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
},
gotoPage : function(pageToNum) {
this.doLoad((Ext.util.Format.trim(pageToNum) - 1) * this.pageSize);

this.inputItem.setValue(Ext.util.Format.trim(pageToNum));
}

});
Ext.reg('pagingtoolbarexp',Ext.ux.grid.PagingToolbarExp);