`
chenxueyong
  • 浏览: 342124 次
  • 性别: 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
评论
发表评论

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

相关推荐

    office2john的源文件

    office2john的源文件

    青海省各市、县区及街镇SVG图

    青海省各市、县区及街镇SVG图

    (源码)基于JavaNIO框架的网络IO处理系统.zip

    # 基于Java NIO框架的网络IO处理系统 ## 项目简介 本项目是一个基于Java NIO（非阻塞IO）框架的网络IO处理系统。通过使用Java NIO的多路复用技术，系统能够高效地处理多个客户端的连接和IO操作。项目涵盖了从基本的Socket编程到复杂的NIO多路复用实现，适合学习和理解Java网络编程的高级特性。 ## 项目的主要特性和功能 1. 多路复用技术使用Java NIO的Selector机制，实现单线程处理多个客户端的连接和IO操作。 2. 多线程处理通过多线程技术，系统能够并发处理多个客户端的请求，提高服务器的处理能力。 3. 文件IO操作包括基本的文件写入、缓冲文件IO、随机访问文件写入等操作，展示了Java文件IO的多种实现方式。 4. 网络IO操作包括Socket客户端和服务器的实现，展示了如何使用Java进行网络通信。

    数据结构- C语言版-树的遍历代码

    二叉树先、中、后序遍历及层次遍历代码 C90版

    支持向量机 - SVM支持向量机

    支持向量机

    (源码)基于Arduino和Android的温湿度数据采集系统.zip

    # 基于Arduino和Android的温湿度数据采集系统 ## 项目简介 本项目是一个基于Arduino和Android的温湿度数据采集系统，主要用于远程监控环境中的温湿度数据。系统由Arduino Nano控制DHT22传感器进行数据采集，并通过USRWIFI232A模块将数据传输到Android设备。Android端通过WiFi连接到服务器，实时读取并显示温湿度数据。 ## 项目的主要特性和功能 硬件设计 使用Arduino Nano作为主控芯片。 采用DHT22传感器进行温湿度数据采集。 通过USRWIFI232A模块实现无线数据传输。 软件设计 Arduino端实现DHT传感器的读取功能，包括温度和湿度的数据采集与处理。 Android端开发了一个Android应用，通过WiFi连接到服务器，实时读取并显示温湿度数据。 功能模块

    c语言情人节的红玫瑰.rar

    c语言情人节的红玫瑰

    c语言UDP传输系统源码.rar

    c语言UDP传输系统源码

    数字标识控件.zip

    数字标识控件

    c语言打字母游戏源码.rar

    c语言打字母游戏源码

    c语言实现数字雨.rar

    c语言实现数字雨

    android Gallery实现异步加载网络图片 并只加载当前停止页面图.zip

    android Gallery实现异步加载网络图片 并只加载当前停止页面图

    C#ASP.NET手机端H5会议室预约系统源码 手机版会议室预约源码数据库 SQL2008源码类型 WebForm

    ASP.NET手机端H5会议室预约系统源码 手机版会议室预约源码 一、源码介绍 H5手机版会议室预约系统是一个高效快速便利的内部预约平台，让需要预定会议室的人能通过这个平 台发布预定，没有预定的人也能通过平台查看他人预定。通过后台添加账号即可登录预约平台，发布会 议室预定。 二、主要功能 后台管理包括 会议室信息管理，预约信息管理，用户信息管理。 前台手机版预约系统包括 日历查看预定信息，点击进入所选日期详细预约信息，预定会议室，我的预 约等功能模块。 后台采用模型管理功能可以使用后台对表结构进行维护，方便二次开发。 后台也可以增加部门，实现各部门之间管理员查看各自部门预约信息，用户信息等功能。

    九州仙侠传2砸蛋系统以及各类修复带数据库

    修复了实时获取区服 修复多区识别问题 带CDK功能 还有一些 忘记了 1年前修复的 好久没搞了

    C#ASP.NET教育培训管理系统源码数据库 Access源码类型 WinForm

    ASP.NET教育培训管理系统源码 一、源码描述：可以实现学员发卡，学员缴费，学员上课，教师管理，课程管理，图书管理， 水晶报表查询，文字与图形并存，管理员权限设置，学员生日提醒，图书逾期提醒。 二、菜单功能 1、 学员管理 2、 教师管理 3、 课程管理 4、 图书管理 5、 统计报表 6、 辅助功能 7、 系统设置 8、 添加学员 9、 学员上课 10、图书借阅 11、今日提醒 12、短信平台 13、微信平台 14、数据清理 三、注意事项 1、开发环境为Visual Studio 2010，数据库为ACCESS，使用.net 4.0开发, C/S架构。 2、管理员登陆名：admin 密码： admin

    考研真题及讲解介绍-数学-2024

    考研真题及讲解介绍-数学-2024

    c语言做的一个任务管理器.rar

    c语言做的一个任务管理器

    c语言学生信息系统.rar

    c语言学生信息系统

    个人练习-练习版内网通？

    大致思路以及代码

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