`
chenxueyong
  • 浏览: 342126 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

DynamicPageBar

EXTUP 
阅读更多
用extjs,一个很重要的原因是因为他的grid真的很好，很强大，要使用它的grid，不可避免会用到PagingToolbar这个widget，不过使用后发现，这个paging的工具栏有几个缺点：
1.通过键盘快捷键翻页，方式与我们习惯不太一样，看看PagingToolbar源代码：

Java代码 复制代码
  1. onPagingKeydown : function(e){   
  2.     var k = e.getKey(), d = this.getPageData(), pageNum;   
  3.     if (k == e.RETURN) {   
  4.         e.stopEvent();   
  5.         pageNum = this.readPage(d);   
  6.         if(pageNum !== false){   
  7.             pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;   
  8.             this.doLoad(pageNum * this.pageSize);   
  9.         }   
  10.     }else if (k == e.HOME || k == e.END){//第一页和最后一页   
  11.         e.stopEvent();   
  12.         pageNum = k == e.HOME ? 1 : d.pages;   
  13.         this.field.dom.value = pageNum;   
  14.     }else if (k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){//前一页和后一页   
  15.         e.stopEvent();   
  16.         if(pageNum = this.readPage(d)){   
  17.             var increment = e.shiftKey ? 10 : 1;   
  18.             if(k == e.DOWN || k == e.PAGEDOWN){   
  19.                 increment *= -1;   
  20.             }   
  21.             pageNum += increment;   
  22.             if(pageNum >= 1 & pageNum <= d.pages){   
  23.                 this.field.dom.value = pageNum;   
  24.             }   
  25.         }   
  26.     }   
  27. }  
    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或方向&larr;翻到前一页，使用pagedown或方向&rarr;翻到后一页，使用home或方向&uarr;翻到第一页，使用end或&darr;翻到最后一页

2.页码选择的textfield未进行格式控制，源代码中使用的是一个dom，因此也没有ext中textfield控件的样式去美化，可以使用任何字符去输入。

3.缺少自定义pageSize的输入框

4.和grid配合时，grid第一次load的时候必须要提供start和limit两个参数，比较麻烦，而且传递给后台的参数start和limit不方便后台使用，一般后台翻页的对象经过封装，使用pageNo和pageSize属性的较多，因此要改造pagingtoolbar的传输方式

下面是经过扩展的DynamicPageBar的代码：
Java代码 复制代码
  1. Ext.ns("Ext.ux.grid");   
  2.   
  3. Ext.ux.grid.DynamicPageBar=Ext.extend(Ext.Toolbar,{   
  4.        
  5.     pageSize:20,   
  6.        
  7.     pageNo:1,   
  8.        
  9.     totalCount:0,   
  10.        
  11.     displayMsg:'Displaying {0} - {1} of {2}',   
  12.        
  13.     emptyMsg : 'No data to display',   
  14.        
  15.     beforePageText : "page",   
  16.        
  17.     afterPageText : "of {0}",   
  18.        
  19.     beforeChooseText: "show",   
  20.        
  21.     afterChooseText: "items",   
  22.        
  23.     firstText : "First Page",   
  24.        
  25.     prevText : "Previous Page",   
  26.        
  27.     nextText : "Next Page",   
  28.        
  29.     lastText : "Last Page",   
  30.        
  31.     refreshText : "Refresh",   
  32.        
  33.     initComponent:function(){   
  34.         this.addEvents("toFirst","toPre","toNext","toLast","toPage","Refresh","change");   
  35.         Ext.ux.grid.DynamicPageBar.superclass.initComponent.call(this);   
  36.         this.bind(this.store);   
  37.     },   
  38.        
  39.     onRender:function(ct,position){   
  40.         Ext.ux.grid.DynamicPageBar.superclass.onRender.call(this, ct, position);   
  41.         this.first = this.addButton({   
  42.             tooltip: this.firstText,   
  43.             iconCls: "x-tbar-page-first",   
  44.             disabled: true,   
  45.             handler: this.onClick.createDelegate(this, ["first"])   
  46.         });   
  47.         this.prev = this.addButton({   
  48.             tooltip: this.prevText,   
  49.             iconCls: "x-tbar-page-prev",   
  50.             disabled: true,   
  51.             handler: this.onClick.createDelegate(this, ["pre"])   
  52.         });   
  53.         this.addSeparator();   
  54.         this.add(this.beforePageText);   
  55.         this.field=this.addField(new Ext.form.NumberField({   
  56.                 id:"pageNoField",   
  57.                 value:1,   
  58.                 allowDecimals:false,   
  59.                 allowNegative:false,   
  60.                 minValue:1,   
  61.                 target:this.onPagingKeydown,   
  62.                 scopeTarget:this,   
  63.                 width:30,   
  64.                 enableKeyEvents:true,   
  65.                 listeners:{   
  66.                     "focus":function(obj){   
  67.                         obj.selectText();   
  68.                     },   
  69.                     "keydown":function(obj,e){   
  70.                         eval(obj.target(obj,e,obj.scopeTarget));   
  71.                     }   
  72.                 }   
  73.         }));   
  74.         this.afterTextEl = this.addText(String.format(this.afterPageText, 1));   
  75.         this.addSeparator();   
  76.         this.next = this.addButton({   
  77.             tooltip: this.nextText,   
  78.             iconCls: "x-tbar-page-next",   
  79.             disabled: true,   
  80.             handler: this.onClick.createDelegate(this, ["next"])   
  81.         });   
  82.         this.last = this.addButton({   
  83.             tooltip: this.lastText,   
  84.             iconCls: "x-tbar-page-last",   
  85.             disabled: true,   
  86.             handler: this.onClick.createDelegate(this, ["last"])   
  87.         });   
  88.            
  89.         this.addSeparator();   
  90.         this.loading = this.addButton({   
  91.             tooltip: this.refreshText,   
  92.             iconCls: "x-tbar-loading",   
  93.             handler: this.onClick.createDelegate(this, ["refresh"])   
  94.         });   
  95.         this.addSeparator();   
  96.         this.add(this.beforeChooseText);   
  97.         this.choose=this.addField(   
  98.             new Ext.form.NumberField({   
  99.                 id:"pageChooseField",                        
  100.                 width:30,   
  101.                 allowDecimals:false,   
  102.                 allowNegative:false,   
  103.                 minValue:1,   
  104.                 target:this.onChooseKeydown,   
  105.                 scopeTarget:this,   
  106.                 enableKeyEvents:true,   
  107.                 listeners:{   
  108.                     "focus":function(obj){   
  109.                          obj.selectText();   
  110.                     },   
  111.                     "keydown":function(obj,e){   
  112.                         eval(obj.target(obj,e,obj.scopeTarget));   
  113.                     }   
  114.                 }   
  115.             })   
  116.         );   
  117.         this.add(this.afterChooseText);   
  118.         this.addSeparator();   
  119.         if(this.displayInfo){   
  120.             this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});   
  121.         };   
  122.         this.loadParams={pageNo:this.pageNo,pageSize:this.pageSize};   
  123.         Ext.getCmp("pageChooseField").setValue(this.loadParams.pageSize);   
  124.         this.store.baseParams=this.loadParams;   
  125.     },   
  126.        
  127.     onClick : function(which){   
  128.         var store = this.store;   
  129.         switch(which){   
  130.             case "first":   
  131.                 this.loadParams.pageNo=1;                   
  132.                 this.fireEvent('toFirst', this, this.getPageData());   
  133.             break;   
  134.             case "pre":   
  135.                 this.loadParams.pageNo--;                  
  136.                 this.fireEvent('toPre', this, this.getPageData());   
  137.             break;   
  138.             case "next":   
  139.                 this.loadParams.pageNo++;   
  140.                 this.fireEvent('toNext', this, this.getPageData());   
  141.             break;   
  142.             case "last":   
  143.                 var total = store.getTotalCount();   
  144.                 this.loadParams.pageNo=Math.ceil(total/this.loadParams.pageSize);   
  145.                 this.fireEvent('toLast', this, this.getPageData());   
  146.             break;   
  147.             case "refresh":   
  148.                 this.fireEvent('refresh', this, this.getPageData());   
  149.             break;   
  150.         };          
  151.         this.doLoad();   
  152.     },   
  153.        
  154.     bind:function(store){   
  155.         store = Ext.StoreMgr.lookup(store);   
  156.         store.on("beforeload", this.beforeLoad, this);   
  157.         store.on("load", this.onLoad, this);   
  158.         store.on("loadexception", this.onLoadError, this);   
  159.         this.store = store;   
  160.     },   
  161.        
  162.     beforeLoad:function(){   
  163.         if(this.rendered && this.loading){   
  164.             this.store.recordIndex=this.getCursor()+1;   
  165.             this.loading.disable();   
  166.         }   
  167.     },   
  168.        
  169.     onLoad : function(store, r, o){   
  170.         if(!this.rendered){   
  171.             return;   
  172.         }   
  173.         var d=this.getPageData();   
  174.         this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pageNum);   
  175.         Ext.getCmp("pageNoField").setValue(d.pageNo);   
  176.         this.first.setDisabled(d.pageNo == 1);   
  177.         this.prev.setDisabled(d.pageNo == 1);   
  178.         this.next.setDisabled(d.pageNo == d.pageNum);   
  179.         this.last.setDisabled(d.pageNo == d.pageNum);   
  180.         this.loading.enable();   
  181.         this.updateInfo();   
  182.         this.fireEvent('change', this, this.getPageData());   
  183.         this.ownerCt.view.updateHeaderSortState();   
  184.     },   
  185.        
  186.     doLoad : function(){   
  187.         var params=this.getPageData();   
  188.         this.store.baseParams=params;   
  189.         this.store.load();   
  190.     },   
  191.        
  192.     onLoadError:function(){   
  193.         if(!this.rendered){   
  194.             return;   
  195.         }   
  196.         this.loading.enable();   
  197.     },   
  198.        
  199.     getPageData:function(){   
  200.         var total = this.store.getTotalCount();   
  201.         var pageData=this.loadParams;   
  202.         pageData.pageNum=Math.ceil(total/pageData.pageSize);   
  203.         return pageData;   
  204.     },   
  205.        
  206.     updateInfo : function(){   
  207.         if(this.displayEl){   
  208.             var count = this.store.getCount();   
  209.             var d = this.getPageData();   
  210.             var preCount = (d.pageNo-1)*d.pageSize;   
  211.             var msg = count == 0 ?   
  212.                 this.emptyMsg :   
  213.                 String.format(   
  214.                     this.displayMsg,   
  215.                     preCount+1, preCount+count, this.store.getTotalCount()   
  216.                 );   
  217.             this.displayEl.update(msg);   
  218.         }   
  219.     },   
  220.        
  221.     onPagingKeydown : function(obj,e,scope){   
  222.         var k=e.getKey();   
  223.         var currentNo=obj.getValue();   
  224.         var params=scope.loadParams;   
  225.         if(k == e.ENTER){   
  226.             e.stopEvent();                 
  227.             if(params.pageNo != currentNo){   
  228.                 if(currentNo<1||currentNo>params.pageNum){   
  229.                     obj.setValue(params.pageNo);   
  230.                     return;   
  231.                 }else{   
  232.                     params.pageNo=currentNo;   
  233.                 }                      
  234.             }else{   
  235.                 return;   
  236.             }   
  237.         }else if (k == e.HOME || k == e.UP){   
  238.             e.stopEvent();   
  239.             if(currentNo<1||currentNo>params.pageNum){   
  240.                     obj.setValue(scope.loadParams.pageNo);   
  241.                     return;   
  242.             }   
  243.             if(params.pageNo==1)return;   
  244.             params.pageNo = 1;   
  245.         }else if (k == e.LEFT || k == e.PAGE_UP){   
  246.             if(currentNo<1||currentNo>params.pageNum){   
  247.                     obj.setValue(params.pageNo);   
  248.                     return;   
  249.             }   
  250.             e.stopEvent();   
  251.             if(params.pageNo==1)return;   
  252.             params.pageNo=Math.max(1,params.pageNo-1);   
  253.         }else if (k == e.RIGHT || k == e.PAGE_DOWN){   
  254.             e.stopEvent();   
  255.             if(currentNo<1||currentNo>params.pageNum){   
  256.                     obj.setValue(params.pageNo);   
  257.                     return;   
  258.             }   
  259.             if(params.pageNo==params.pageNum)return;   
  260.             params.pageNo=Math.min(params.pageNum,params.pageNo+1);   
  261.         }else if (k == e.END || k == e.DOWN){   
  262.             e.stopEvent();   
  263.             if(currentNo<1||currentNo>params.pageNum){   
  264.                     obj.setValue(params.pageNo);   
  265.                     return;   
  266.             }   
  267.             if(params.pageNo==params.pageNum)return;   
  268.             params.pageNo = params.pageNum;   
  269.         }else{   
  270.             return;   
  271.         }   
  272.            
  273.         scope.doLoad();   
  274.     },   
  275.        
  276.     onChooseKeydown:function(obj,e,scope){   
  277.         var k=e.getKey();   
  278.         var currentNo=obj.getValue();   
  279.         var params=scope.loadParams;   
  280.         if(k==e.ENTER){   
  281.             if(currentNo<1||currentNo==params.pageSize){   
  282.                 obj.setValue(params.pageSize);   
  283.                 return ;   
  284.             }else{   
  285.                 params.pageSize=currentNo;   
  286.                 params.pageNo=1;   
  287.                 scope.doLoad();   
  288.             }   
  289.         }else{   
  290.             return;   
  291.         }   
  292.     },   
  293.        
  294.     isLastPage:function(){   
  295.         var d=this.getPageData();   
  296.         return d.pageNo==d.pageNum;   
  297.     },   
  298.        
  299.     isFirstPage:function(){   
  300.         var d=this.getPageData();   
  301.         return d.pageNo==1;   
  302.     },   
  303.        
  304.     toFirstPage:function(){   
  305.         if(!this.isFirstPage()){   
  306.             this.onClick("first");   
  307.         }   
  308.     },   
  309.        
  310.     toLastPage:function(){   
  311.         if(!this.isLastPage()){   
  312.             this.onClick("last");   
  313.         }   
  314.     },   
  315.        
  316.     toPrePage:function(){   
  317.         if(!this.isFirstPage()){   
  318.             this.onClick("pre");   
  319.         }   
  320.     },   
  321.        
  322.     toNextPage:function(){   
  323.         if(!this.isLastPage()){   
  324.             this.onClick("next");   
  325.         }   
  326.     },   
  327.        
  328.     refresh:function(){   
  329.         this.onClick("refresh");   
  330.     },   
  331.        
  332.     getCursor:function(){   
  333.         var d=this.getPageData();   
  334.         return (d.pageNo-1)*d.pageSize;   
  335.     }   
  336.        
  337. });   
  338.   
  339. Ext.reg("dpagebar",Ext.ux.grid.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,排序也没有什么问题，如图：


调用的代码:
Java代码 复制代码
  1. var mainStore=new Ext.data.Store({     
  2.         autoLoad:true,   
  3.                   url:sys.Constants.ROOTPATH+"/sysmgr/SysUser_page.do",   
  4.         remoteSort:true,   
  5.         sortInfo:{   
  6.             field:"createDate",   
  7.             direction:"DESC"  
  8.         },   
  9.         reader:mainReader});   
  10. var mainPageBar=new Ext.ux.grid.DynamicPageBar({   
  11.         pageSize:15,   
  12.         store:mainStore,   
  13.         displayInfo:true,   
  14.         emptyMsg:"没有查询到相关的记录"});   
  15. var mainGrid=new Ext.grid.GridPanel({   
  16.         renderTo:Ext.getBody(),   
  17.         width:1200,   
  18.         height:420,   
  19.         frame:true,   
  20.         stripeRows:true,   
  21.         loadMask:true,   
  22.         viewConfig:{   
  23.             forceFit:true  
  24.         },   
  25.         selModel:sm,           
  26.         colModel:cm,   
  27.         store:mainStore,   
  28.         bbar:mainPageBar   
  29.     });  
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
	});

  • 3c63ddad-dafb-3958-a30c-9fd9d550e2e0-thumb
  • 描述: DynamicPageBar
  • 大小: 6 KB
分享到：
| EXTJS treecombox
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics