Ext.PagingToolbar设置每页显示条数插件
两年没有在这个技术博客上写东西了，说是工作忙吧，其实也不是忙到连写写文章的时间也没有，归根到底还是太懒了。希望今年能够勤奋点，每周坚持写一篇，形成一个好习惯。以前最后一篇写的是FLEX下的分页控件，最近UI层在用Ext，发现Ext.PagingToolbar运行时不能设置每页条数的功能，于是打算自己做一个插件来完成这一工作。
按照国际惯例，先上一个效果图：
效果图1
效果图2
设计思路
1.将一个可以设置每页条数的控件放到PagingToolbar里面去，当改变了每页显示条数时，通知PagingToolbar重新取数据显示；当PagingToolbar中的每页显示条数发生变化时（可能由其它的分页插件引起），更新显示自身数据（每页显示条数）。
2.可以设置每页条数的控件，一般有以下几种，下拉框，滑块控件，文本框等，本文实现了下拉框（支持填写数字），滑块。
3. 设置每页条数的控件可以加到PagingToolbar中的任意位置，如图
代码说明：
1.编写Ext中的插件，Javascript代码格式如下：
3 Ext.ui.plugins.ComboPageSize = function(config) {
4 Ext.apply(this, config);
5 };
6
7 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
8 //自己编写的代码,重点是init: function(pagingToolbar) {...}这段代码
10})
2.将插件加到指定的位置，如上面的图所画，在实际中使用pagingToolbar.insert(index, control)便可以达到目的，这里还有一个方法pagingToolbar.add(control)是直接将控件加到pagingToolbar的最后（如上图黑线所示），这样的话，我们可以为插件定义一个属性
index: 0, //在items中的位置
3.当取到用户设定的每页条数时，这时通知pagingToolbar，主要工作是设置pagingToolbar.pageSize，然后重新计算出start，分页请求取数据的开始数据序号
2 var gp = pagingToolbar.findParentBy(
3 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
4 );
5 var sm = gp.getSelectionModel();
6 if (#ff0000 != sm && sm.hasSelection()) {
7 if (sm instanceof Ext.grid.RowSelectionModel) {
8 rowIndex = gp.store.indexOf(sm.getSelected());
9 } else if (sm instanceof Ext.grid.CellSelectionModel) {
10 rowIndex = sm.getSelectedCell()[0];
11 }
12 }
13 rowIndex += pagingToolbar.cursor;
14 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
注意：
在某种特定情况下，pagingToolbar.cursor会出现不存在的情况（在测试中发现在comobox中手动输入一个数字会出现这种情况），所以用rowIndex比较保险，假如只是让用户选择显示条数，代码只用
pagingToolbar.doLoad(Math.floor(pagingToolbar.cursor/ pagingToolbar.pageSize) * pagingToolbar.pageSize)就可以解决了。
4,当插件发现 pagingToolbar的每页显示数发生变化，对自身的显示信息进行更新，方法是注册侦听pagingToolbar中的change
下拉框插件的完整代码：
View Code
2
3 Ext.ui.plugins.ComboPageSize = function(config) {
4 Ext.apply(this, config);
5 };
6
7 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
8
9 pageSizes: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],
10 prefixText: 'Showing ',
11 postfixText: 'records per page.',
12 addToItem: true, //true添加到items中去，配合index；false则直接添加到最后
13 index: 0, //在items中的位置
14 init: function(pagingToolbar) {
15 var ps = this.pageSizes;
16 var combo = new Ext.form.ComboBox({
17 typeAhead: true,
18 triggerAction: 'all',
19 lazyRender: true,
20 mode: 'local',
21 width: 45,
22 store: ps,
23 enableKeyEvents: true,
24 editable: true,
25 loadPages: function() {
26 var rowIndex = 0;
27 var gp = pagingToolbar.findParentBy(
28 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
29 );
30 var sm = gp.getSelectionModel();
31 if (undefined != sm && sm.hasSelection()) {
32 if (sm instanceof Ext.grid.RowSelectionModel) {
33 rowIndex = gp.store.indexOf(sm.getSelected());
34 } else if (sm instanceof Ext.grid.CellSelectionModel) {
35 rowIndex = sm.getSelectedCell()[0];
36 }
37 }
38 rowIndex += pagingToolbar.cursor;
39 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
40 },
41 listeners: {
42 select: function(c, r, i) {
43 pagingToolbar.pageSize = ps[i];
44 this.loadPages();
45 },
46 blur: function() {
47 var pagesizeTemp = Number(this.getValue());
48 if (isNaN(pagesizeTemp)) {
49 this.setValue(pagingToolbar.pageSize);
50 return;
51 }
52 pagingToolbar.pageSize = Number(this.getValue());
53 this.loadPages();
54 }
55 }
56 });
57 if (this.addToItem) {
58 var inputIndex = this.index;
59 if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
60 pagingToolbar.insert(++inputIndex, '-');
61 pagingToolbar.insert(++inputIndex, this.prefixText);
62 pagingToolbar.insert(++inputIndex, combo);
63 pagingToolbar.insert(++inputIndex, this.postfixText);
64 }
65 else {
66 pagingToolbar.add('-');
67 pagingToolbar.add(this.prefixText);
68 pagingToolbar.add(combo);
69 pagingToolbar.add(this.postfixText);
70 }
71 pagingToolbar.on({
72 beforedestroy: function() {
73 combo.destroy();
74 },
75 change: function() {
76 combo.setValue(pagingToolbar.pageSize);
77
78 }
79 });
80
81 }
82 })
滑块插件的完整代码：
View Code
2
3 Ext.ui.plugins.SliderPageSize = function(config) {
4 Ext.apply(this, config);
5 };
6
7 Ext.extend(Ext.ui.plugins.SliderPageSize, Ext.util.Observable, {
8 pageSizes: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],
9 tipText: '每页{0}条',
10 addToItem: true, //true添加到items中去，配合index；false则直接添加到最后
11 index: 10, //在items中的位置
12 init: function(pagingToolbar) {
13
14 var ps = this.pageSizes;
15 var sv = 0;
16 Ext.each(this.pageSizes, function(ps, i) {
17 if (ps == pagingToolbar.pageSize) {
18 sv = i;
19 return;
20 }
21 });
22 var tt = this.tipText;
23 var slider = new Ext.Slider({
24 width: 115,
25 value: sv,
26 minValue: 0,
27 maxValue: ps.length - 1,
28 plugins: new Ext.ux.SliderTip({
29 getText: function(slider) { return String.format(tt, ps[slider.value]); }
30 }),
31 listeners: {
32 changecomplete: function(s, v) {
33 pagingToolbar.pageSize = ps[v];
34 var rowIndex = 0;
35 var gp = pagingToolbar.findParentBy(
36 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
37 );
38 var sm = gp.getSelectionModel();
39 if (undefined != sm && sm.hasSelection()) {
40 if (sm instanceof Ext.grid.RowSelectionModel) {
41 rowIndex = gp.store.indexOf(sm.getSelected());
42 } else if (sm instanceof Ext.grid.CellSelectionModel) {
43 rowIndex = sm.getSelectedCell()[0];
44 }
45 }
46 rowIndex += pagingToolbar.cursor;
47 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
48 }
49 }
50 });
51 //
52 if (this.addToItem) {
53 var inputIndex = this.index;
54 if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
55 pagingToolbar.insert(++inputIndex, '-');
56 pagingToolbar.insert(++inputIndex, slider);
57 }
58 else {
59 pagingToolbar.add('-');
60 pagingToolbar.add(slider);
61 }
62 //
63 pagingToolbar.on({
64 beforedestroy: function() {
65 slider.destroy();
66 },
67 change: function() {
68 for (var i = 0; i < ps.length; i++) {
69 if (ps[i] == pagingToolbar.pageSize) {
70 slider.setValue(i);
71 }
72 }
73 }
74 });
75
76 }
77 });
代码下载：/Files/badwps/ExtPagingExample.rar （Extjs文件夹中的Ext库文件删了，自己手动加回去吧，基于ext3.3）
