在Ext的原有分页控件中,服务器端方法是根据传入的起始数据记录号(start),和显示多少条记录(limit)来返回当前页记录的。有时候我们经常 是根据当前页码(pageIndex),和每页显示记录数(pageSize)来获取当前页数据,下面就是我根据需要自己写的一个对 Ext.PagingToolbar的扩展:Ext.PagingToolbarExt。
1
/* *
2
* @author Terry
3
*/
4
5
Ext.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
131
Ext.reg('pagingtoolbarex', Ext.PagingToolbarEx);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131