extjs扩展之DynamicPageBar
用extjs,一个很重要的原因是因为他的grid真的很好，很强大，要使用它的grid，不可避免会用到PagingToolbar这个widget，不过使用后发现，这个paging的工具栏有几个缺点：
1.通过键盘快捷键翻页，方式与我们习惯不太一样，看看PagingToolbar源代码：
而我希望使用pageup或方向←翻到前一页，使用pagedown或方向→翻到后一页，使用home或方向↑翻到第一页，使用end或↓翻到最后一页
2.页码选择的textfield未进行格式控制，源代码中使用的是一个dom，因此也没有ext中textfield控件的样式去美化，可以使用任何字符去输入。
3.缺少自定义pageSize的输入框
4.和grid配合时，grid第一次load的时候必须要提供start和limit两个参数，比较麻烦，而且传递给后台的参数start和limit不方便后台使用，一般后台翻页的对象经过封装，使用pageNo和pageSize属性的较多，因此要改造pagingtoolbar的传输方式
下面是经过扩展的DynamicPageBar的代码：
此扩展修改了翻页的逻辑，传递给后台的参数，以及新增加了几个事件和方法用来更灵活的控制翻页逻辑，增加了自定义每页显示数量，和Grid配合时无需指定start和limit参数，传递给后台的参数为pageNo与pageSize,排序也没有什么问题，如图：
调用的代码:
1.通过键盘快捷键翻页，方式与我们习惯不太一样，看看PagingToolbar源代码：
onPagingKeydown : function(e){
var k = e.getKey(), d = this.getPageData(), pageNum;
if (k == e.RETURN) {
e.stopEvent();
pageNum = this.readPage(d);
if(pageNum !== false){
pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
this.doLoad(pageNum * this.pageSize);
}
}else if (k == e.HOME || k == e.END){//第一页和最后一页
e.stopEvent();
pageNum = k == e.HOME ? 1 : d.pages;
this.field.dom.value = pageNum;
}else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){//前一页和后一页
e.stopEvent();
if(pageNum = this.readPage(d)){
var increment = e.shiftKey ? 10 : 1;
if(k == e.DOWN || k == e.PAGEDOWN){
increment *= -1;
}
pageNum += increment;
if(pageNum >= 1 & pageNum <= d.pages){
this.field.dom.value = pageNum;
}
}
}
}
而我希望使用pageup或方向←翻到前一页，使用pagedown或方向→翻到后一页，使用home或方向↑翻到第一页，使用end或↓翻到最后一页
2.页码选择的textfield未进行格式控制，源代码中使用的是一个dom，因此也没有ext中textfield控件的样式去美化，可以使用任何字符去输入。
3.缺少自定义pageSize的输入框
4.和grid配合时，grid第一次load的时候必须要提供start和limit两个参数，比较麻烦，而且传递给后台的参数start和limit不方便后台使用，一般后台翻页的对象经过封装，使用pageNo和pageSize属性的较多，因此要改造pagingtoolbar的传输方式
下面是经过扩展的DynamicPageBar的代码：
Ext.ns("Ext.ux.grid");
Ext.ux.grid.DynamicPageBar=Ext.extend(Ext.Toolbar,{
pageSize:20,
pageNo:1,
totalCount:0,
displayMsg:'Displaying {0} - {1} of {2}',
emptyMsg : 'No data to display',
beforePageText : "page",
afterPageText : "of {0}",
beforeChooseText: "show",
afterChooseText: "items",
firstText : "First Page",
prevText : "Previous Page",
nextText : "Next Page",
lastText : "Last Page",
refreshText : "Refresh",
initComponent:function(){
this.addEvents("toFirst","toPre","toNext","toLast","toPage","Refresh","change");
Ext.ux.grid.DynamicPageBar.superclass.initComponent.call(this);
this.bind(this.store);
},
onRender:function(ct,position){
Ext.ux.grid.DynamicPageBar.superclass.onRender.call(this, ct, position);
this.first = this.addButton({
tooltip: this.firstText,
iconCls: "x-tbar-page-first",
disabled: true,
handler: this.onClick.createDelegate(this, ["first"])
});
this.prev = this.addButton({
tooltip: this.prevText,
iconCls: "x-tbar-page-prev",
disabled: true,
handler: this.onClick.createDelegate(this, ["pre"])
});
this.addSeparator();
this.add(this.beforePageText);
this.field=this.addField(new Ext.form.NumberField({
id:"pageNoField",
value:1,
allowDecimals:false,
allowNegative:false,
minValue:1,
target:this.onPagingKeydown,
scopeTarget:this,
width:30,
enableKeyEvents:true,
listeners:{
"focus":function(obj){
obj.selectText();
},
"keydown":function(obj,e){
eval(obj.target(obj,e,obj.scopeTarget));
}
}
}));
this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
this.addSeparator();
this.next = this.addButton({
tooltip: this.nextText,
iconCls: "x-tbar-page-next",
disabled: true,
handler: this.onClick.createDelegate(this, ["next"])
});
this.last = this.addButton({
tooltip: this.lastText,
iconCls: "x-tbar-page-last",
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"])
});
this.addSeparator();
this.add(this.beforeChooseText);
this.choose=this.addField(
new Ext.form.NumberField({
id:"pageChooseField",
width:30,
allowDecimals:false,
allowNegative:false,
minValue:1,
target:this.onChooseKeydown,
scopeTarget:this,
enableKeyEvents:true,
listeners:{
"focus":function(obj){
obj.selectText();
},
"keydown":function(obj,e){
eval(obj.target(obj,e,obj.scopeTarget));
}
}
})
);
this.add(this.afterChooseText);
this.addSeparator();
if(this.displayInfo){
this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
};
this.loadParams={pageNo:this.pageNo,pageSize:this.pageSize};
Ext.getCmp("pageChooseField").setValue(this.loadParams.pageSize);
this.store.baseParams=this.loadParams;
},
onClick : function(which){
var store = this.store;
switch(which){
case "first":
this.loadParams.pageNo=1;
this.fireEvent('toFirst', this, this.getPageData());
break;
case "pre":
this.loadParams.pageNo--;
this.fireEvent('toPre', this, this.getPageData());
break;
case "next":
this.loadParams.pageNo++;
this.fireEvent('toNext', this, this.getPageData());
break;
case "last":
var total = store.getTotalCount();
this.loadParams.pageNo=Math.ceil(total/this.loadParams.pageSize);
this.fireEvent('toLast', this, this.getPageData());
break;
case "refresh":
this.fireEvent('refresh', this, this.getPageData());
break;
};
this.doLoad();
},
bind:function(store){
store = Ext.StoreMgr.lookup(store);
store.on("beforeload", this.beforeLoad, this);
store.on("load", this.onLoad, this);
store.on("loadexception", this.onLoadError, this);
this.store = store;
},
beforeLoad:function(){
if(this.rendered && this.loading){
this.store.recordIndex=this.getCursor()+1;
this.loading.disable();
}
},
onLoad : function(store, r, o){
if(!this.rendered){
return;
}
var d=this.getPageData();
this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pageNum);
Ext.getCmp("pageNoField").setValue(d.pageNo);
this.first.setDisabled(d.pageNo == 1);
this.prev.setDisabled(d.pageNo == 1);
this.next.setDisabled(d.pageNo == d.pageNum);
this.last.setDisabled(d.pageNo == d.pageNum);
this.loading.enable();
this.updateInfo();
this.fireEvent('change', this, this.getPageData());
this.ownerCt.view.updateHeaderSortState();
},
doLoad : function(){
var params=this.getPageData();
this.store.baseParams=params;
this.store.load();
},
onLoadError:function(){
if(!this.rendered){
return;
}
this.loading.enable();
},
getPageData:function(){
var total = this.store.getTotalCount();
var pageData=this.loadParams;
pageData.pageNum=Math.ceil(total/pageData.pageSize);
return pageData;
},
updateInfo : function(){
if(this.displayEl){
var count = this.store.getCount();
var d = this.getPageData();
var preCount = (d.pageNo-1)*d.pageSize;
var msg = count == 0 ?
this.emptyMsg :
String.format(
this.displayMsg,
preCount+1, preCount+count, this.store.getTotalCount()
);
this.displayEl.update(msg);
}
},
onPagingKeydown : function(obj,e,scope){
var k=e.getKey();
var currentNo=obj.getValue();
var params=scope.loadParams;
if(k == e.ENTER){
e.stopEvent();
if(params.pageNo != currentNo){
if(currentNo<1||currentNo>params.pageNum){
obj.setValue(params.pageNo);
return;
}else{
params.pageNo=currentNo;
}
}else{
return;
}
}else if (k == e.HOME || k == e.UP){
e.stopEvent();
if(currentNo<1||currentNo>params.pageNum){
obj.setValue(scope.loadParams.pageNo);
return;
}
if(params.pageNo==1)return;
params.pageNo = 1;
}else if (k == e.LEFT || k == e.PAGE_UP){
if(currentNo<1||currentNo>params.pageNum){
obj.setValue(params.pageNo);
return;
}
e.stopEvent();
if(params.pageNo==1)return;
params.pageNo=Math.max(1,params.pageNo-1);
}else if (k == e.RIGHT || k == e.PAGE_DOWN){
e.stopEvent();
if(currentNo<1||currentNo>params.pageNum){
obj.setValue(params.pageNo);
return;
}
if(params.pageNo==params.pageNum)return;
params.pageNo=Math.min(params.pageNum,params.pageNo+1);
}else if (k == e.END || k == e.DOWN){
e.stopEvent();
if(currentNo<1||currentNo>params.pageNum){
obj.setValue(params.pageNo);
return;
}
if(params.pageNo==params.pageNum)return;
params.pageNo = params.pageNum;
}else{
return;
}
scope.doLoad();
},
onChooseKeydown:function(obj,e,scope){
var k=e.getKey();
var currentNo=obj.getValue();
var params=scope.loadParams;
if(k==e.ENTER){
if(currentNo<1||currentNo==params.pageSize){
obj.setValue(params.pageSize);
return ;
}else{
params.pageSize=currentNo;
params.pageNo=1;
scope.doLoad();
}
}else{
return;
}
},
isLastPage:function(){
var d=this.getPageData();
return d.pageNo==d.pageNum;
},
isFirstPage:function(){
var d=this.getPageData();
return d.pageNo==1;
},
toFirstPage:function(){
if(!this.isFirstPage()){
this.onClick("first");
}
},
toLastPage:function(){
if(!this.isLastPage()){
this.onClick("last");
}
},
toPrePage:function(){
if(!this.isFirstPage()){
this.onClick("pre");
}
},
toNextPage:function(){
if(!this.isLastPage()){
this.onClick("next");
}
},
refresh:function(){
this.onClick("refresh");
},
getCursor:function(){
var d=this.getPageData();
return (d.pageNo-1)*d.pageSize;
}
});
Ext.reg("dpagebar",Ext.ux.grid.DynamicPageBar);
此扩展修改了翻页的逻辑，传递给后台的参数，以及新增加了几个事件和方法用来更灵活的控制翻页逻辑，增加了自定义每页显示数量，和Grid配合时无需指定start和limit参数，传递给后台的参数为pageNo与pageSize,排序也没有什么问题，如图：
调用的代码:
var mainStore=new Ext.data.Store({
autoLoad:true,
url:sys.Constants.ROOTPATH+"/sysmgr/SysUser_page.do",
remoteSort:true,
sortInfo:{
field:"createDate",
direction:"DESC"
},
reader:mainReader});
var mainPageBar=new Ext.ux.grid.DynamicPageBar({
pageSize:15,
store:mainStore,
displayInfo:true,
emptyMsg:"没有查询到相关的记录"});
var mainGrid=new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
width:1200,
height:420,
frame:true,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true
},
selModel:sm,
colModel:cm,
store:mainStore,
bbar:mainPageBar
});