extjs扩展之DynamicPageBar

用extjs,一个很重要的原因是因为他的grid真的很好，很强大，要使用它的grid，不可避免会用到PagingToolbar这个widget，不过使用后发现，这个paging的工具栏有几个缺点：
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,排序也没有什么问题，如图：
[img]http://willson-tien.iteye.com/upload/attachment/41102/3c63ddad-dafb-3958-a30c-9fd9d550e2e0.jpg[/img]

调用的代码:

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
	});