Ext 2.0使用:對分頁Ext.PagingToolbar的擴展

 在Ext的原有分頁控件中，服務器端方法是根據傳入的起始數據記錄號(start)，和顯示多少條記錄(limit)來返回當前頁記錄的。有時候我們經常是根據當前頁碼(pageIndex)，和每頁顯示記錄數(pageSize)來獲取當前頁數據，下面就是我根據需要自己寫的一個對Ext.PagingToolbar的擴展：Ext.PagingToolbarExt。

  1/**//**
  2 * @author Terry
  3 */
  4
  5Ext.PagingToolbarEx = Ext.extend(Ext.PagingToolbar, {
  6    afterPageText: '/ {0}',
  7    beforePageText: '頁',
  8    displayInfo: true,
  9    displayMsg: '顯示 {0} - {1} / {2}',
 10    emptyMsg: '沒有數據',
 11    firstText: '第一頁',
 12    prevText: '前一頁',
 13    nextText: '後一頁',
 14    lastText: '最後一頁',
 15    refreshText: '刷新',
 16    
 17    updateInfo: function(){
 18        if(this.displayEl){
 19            var count = this.store.getCount();
 20            
 21            var msg = count == 0 ? this.emptyMsg : String.format(this.displayMsg, this.cursor, this.cursor + count - 1, this.store.getTotalCount());
 22            
 23            this.displayEl.update(msg);
 24        }
 25    },
 26    
 27    onLoad: function(store, r, o){
 28        if(!this.rendered){
 29            this.dsLoaded = [store, r, o];
 30            
 31            return;
 32        }
 33        
 34        if(!o.params || this.store.getTotalCount() == 0){
 35            this.cursor = 0;
 36        }
 37        else{
 38            this.cursor = (o.params[this.paramNames.start] - 1) * this.pageSize + 1;
 39        }
 40        
 41        var d =this.getPageData(), ap = d.activePage, ps = d.pages;
 42        
 43        this.afterTextEl.el.innerHTML = String.format(this.afterPageText, d.pages);
 44        this.field.dom.value = ap;
 45        
 46        this.first.setDisabled(ap == 1 || ps == 0);
 47        this.prev.setDisabled( ap == 1 || ps == 0);
 48        this.next.setDisabled(ap == ps || ps == 0);
 49        this.last.setDisabled(ap == ps || ps == 0);
 50        this.loading.enable();
 51        this.loading.setDisabled(ps == 0);
 52        this.updateInfo();    
 53    },
 54    
 55    getPageData: function(){
 56        var total = this.store.getTotalCount();
 57        
 58        return {
 59            total: total,
 60            activePage: total != 0 && this.cursor == 0 ? 1 : Math.ceil(this.cursor / this.pageSize),
 61            pages: total !=0 && total < this.pageSize ? 1 : Math.ceil(total / this.pageSize)
 62        }
 63    },
 64    
 65    onClick: function(which){
 66        var store = this.store;
 67        var d = this.getPageData();
 68        
 69        switch(which){
 70            case 'first':
 71                this.doLoad(1);
 72                break;
 73            case 'prev':
 74                this.doLoad(Math.max(1, d.activePage - 1));
 75                break;
 76            case 'next':
 77                this.doLoad(Math.min(d.pages, d.activePage + 1));
 78                break;
 79            case 'last':
 80                this.doLoad(d.pages);
 81                break;
 82            case 'refresh':
 83                this.doLoad(d.activePage);
 84                break;
 85        }
 86    },
 87    
 88    onPagingKeydown: function(e){
 89        var k = e.getKey(), d = this.getPageData(), pageNum;
 90        
 91        if(k == e.RETURN){
 92            e.stopEvent();
 93            
 94            pageNum = this.readPage(d)
 95            
 96            if(pageNum >= d.pages){
 97                pageNum = d.pages;
 98            }
 99            else if(pageNum <= 1){
100                pageNum = 1;
101            }
102            
103            this.doLoad(pageNum);
104    
105        }
106        else if(k == e.HOME || k == e.END){
107            e.stopEvent();
108            pageNum = k == e.HOME ? 1 : d.pages;
109            this.field.dom.value = pageNum;
110        }
111        else if(k == e.UP || k == e.PAGEUP || k == e.DOWN || k == e.PAGEDOWN){
112            e.stopEvent();
113            
114            if(pageNum = this.readPage(d)){
115                var increment = e.shiftKey ? 10 : 1;
116                
117                if(k == e.DOWN || k == e.PAGEDOWN){
118                    increment *= -1;
119                }
120                
121                pageNum += increment;
122                
123                if(pageNum >= 1 & pageNum <= d.pages){
124                    this.field.dom.value = pageNum;
125                }
126            }
127        }
128    }
129});
130
131Ext.reg('pagingtoolbarex', Ext.PagingToolbarEx);