Ext 2.0使用:对分页Ext.PagingToolbar的扩展

来源：互联网发布：淘宝店主的故事编辑：程序博客网时间：2024/05/17 00:57

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

转自http://www.blogjava.net/Liangtianyu/archive/2007/11/05/158155.html