Ext.namespace('Ext.ux.PagingToolbarEx');
Ext.ux.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
space : ' ',
beforePageText : '',
afterPageText : '',
randomId : 0,
formArrays : function(arys, cur_page) {
for(var i=0; i<arys.length; i++) {
var page_dom = null;
if(!Ext.get('page_dom_'+this.randomId+'_'+i)) {
page_dom = Ext.get(this.addDom({
tag: 'span',
type: 'text',
id: 'page_dom_'+this.randomId+'_'+i,
html: this.space+arys[i]+this.space
}).el);
} else {
page_dom = Ext.get('page_dom_'+this.randomId+'_'+i);
}
if(page_dom) {
page_dom.dom.innerHTML = (arys[i]=='')?'':(this.space+arys[i]+this.space);
if(arys[i]!='' && arys[i]!='...' && arys[i]!=cur_page) {
page_dom.dom.style.cursor = 'pointer';
page_dom.dom.style.color = '#6294E5';
//page_dom.dom.style.fontWeight = 'bold';
}
if(arys[i] == cur_page) {
page_dom.dom.style.cursor = '';
page_dom.dom.style.color = '#000000';
}
page_dom.removeAllListeners();
if(arys[i] == '...' || arys[i] == '' || arys[i]==cur_page) {
page_dom.on('click',function() {});
} else if(typeof(arys[i]) == 'number') {
page_dom.on('click',function(e,k) {
var cur_page = parseInt(k.textContent || k.innerText);
var total = this.store.getTotalCount();
var pages = Math.ceil(total/this.pageSize);
this.doLoad((cur_page-1) * this.pageSize);
}, this);
}
}
}
},
formPage : function() {
//this.cursor 0,1,2...
//var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize) 1,2,3...
//this.cursor+1, this.cursor+count, this.store.getTotalCount() 11-20 of 45
//var pages = Math.ceil(this.store.getTotalCount()/this.pageSize) total 45 pages
var cur_page = Math.ceil((this.cursor+this.pageSize)/this.pageSize);
var total = this.store.getTotalCount();
var pages = Math.ceil(total/this.pageSize);
var arrays = [];
if(pages <= 10) {
for(var i=0; i<11; i++) {
if(i<pages) arrays.push(i+1);
else arrays.push('');
}
} else {
if(cur_page <= 6) {
for(var i=0; i<11; i++) {
if(i<=8) arrays.push(i+1);
else if(i==9) arrays.push('...');
else if(i==10) arrays.push(pages);
}
} else if(cur_page > 6 && cur_page < (pages-5)) {
for(var i=0; i<11; i++) {
if(i==0) arrays.push(i+1);
else if(i==1 || i==9) arrays.push('...');
else if(i>1 && i<9) arrays.push(cur_page-(5-i));
else if(i==10) arrays.push(pages);
}
} else if(cur_page >= (pages-5)) {
for(var i=0; i<11; i++) {
if(i==0) arrays.push(i+1);
else if(i==1) arrays.push('...');
else arrays.push(pages-(10-i));
}
}
}
this.formArrays(arrays, cur_page);
},
// private
onRender : function(ct, position){
this.randomId = Math.random();
Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
this.first = this.addButton({
tooltip: this.firstText,
//iconCls: "x-tbar-page-first",
hide: true,
text: '',
disabled: true,
handler: this.onClick.createDelegate(this, ["first"])
});
this.prev = this.addButton({
tooltip: this.prevText,
//iconCls: "x-tbar-page-prev",
text: '<span style="color:#6294E5"><< Previous</span>',
disabled: true,
handler: this.onClick.createDelegate(this, ["prev"])
});
this.addSeparator();
this.add(this.beforePageText);
this.field = Ext.get(this.addDom({
//tag: "input",
//type: "text",
//size: "3",
//value: "1",
//cls: "x-tbar-page-number"
tag: "span",
type: "text",
html: ''
}).el);
for(var i=0; i<11; i++) {
this.addDom({
tag: 'span',
type: 'text',
id: 'page_dom_'+this.randomId+'_'+i,
html: ''
})
}
this.field.on("keydown", this.onPagingKeydown, this);
this.field.on("focus", function(){this.dom.select();});
this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
this.field.setHeight(18);
this.addSeparator();
this.next = this.addButton({
tooltip: this.nextText,
//iconCls: "x-tbar-page-next",
text: '<span style="color:#6294E5">Next >></span>',
style: 'color:#77AAFF',
disabled: true,
handler: this.onClick.createDelegate(this, ["next"])
});
this.last = this.addButton({
tooltip: this.lastText,
//iconCls: "x-tbar-page-last",
hide: true,
text: '',
disabled: true,
handler: this.onClick.createDelegate(this, ["last"])
});
this.addSeparator();
this.loading = this.addButton({
tooltip: this.refreshText,
iconCls: "x-tbar-loading",
handler: this.onClick.createDelegate(this, ["refresh"])
});
if(this.displayInfo){
this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
}
if(this.dsLoaded){
this.onLoad.apply(this, this.dsLoaded);
}
},
// private
onLoad : function(store, r, o){
if(!this.rendered){
this.dsLoaded = [store, r, o];
return;
}
this.cursor = o.params ? o.params[this.paramNames.start] : 0;
var d = this.getPageData(), ap = d.activePage, ps = d.pages;
this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
this.field.dom.value = ap;
this.first.setDisabled(ap == 1);
this.prev.setDisabled(ap == 1);
this.next.setDisabled(ap == ps);
this.last.setDisabled(ap == ps);
this.loading.enable();
this.updateInfo();
this.formPage();
}
});
Ext.reg('pagingtoolbarex', Ext.ux.PagingToolbarEx);
