随笔- 15  评论- 310  文章- 0 

Ext.PagingToolbar设置每页显示条数插件

      两年没有在这个技术博客上写东西了,说是工作忙吧,其实也不是忙到连写写文章的时间也没有,归根到底还是太懒了。希望今年能够勤奋点,每周坚持写一篇,形成一个好习惯。以前最后一篇写的是FLEX下的分页控件,最近UI层在用Ext,发现Ext.PagingToolbar运行时不能设置每页条数的功能,于是打算自己做一个插件来完成这一工作。

 

按照国际惯例,先上一个效果图:

  效果图1

 

  效果图2

设计思路

      1.将一个可以设置每页条数的控件放到PagingToolbar里面去,当改变了每页显示条数时,通知PagingToolbar重新取数据显示;当PagingToolbar中的每页显示条数发生变化时(可能由其它的分页插件引起),更新显示自身数据(每页显示条数)。

      2.可以设置每页条数的控件,一般有以下几种,下拉框,滑块控件,文本框等,本文实现了下拉框(支持填写数字),滑块。

      3. 设置每页条数的控件可以加到PagingToolbar中的任意位置,如图

 

 代码说明:

       1.编写Ext中的插件,Javascript代码格式如下:

1 Ext.namespace('Ext.ui.plugins');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     //自己编写的代码,重点是init: function(pagingToolbar) {...}这段代码

10}) 

 

       2.将插件加到指定的位置,如上面的图所画,在实际中使用pagingToolbar.insert(index, control)便可以达到目的,这里还有一个方法pagingToolbar.add(control)是直接将控件加到pagingToolbar的最后(如上图黑线所示),这样的话,我们可以为插件定义一个属性

          addToItem: true,    //true添加到items中去,配合index;false则直接添加到最后

          index: 0,           //在items中的位置 

      

      3.当取到用户设定的每页条数时,这时通知pagingToolbar,主要工作是设置pagingToolbar.pageSize,然后重新计算出start,分页请求取数据的开始数据序号

 1                 var rowIndex = 0;
 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
 1 Ext.namespace('Ext.ui.plugins');
 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: [510152025305075100200300500],
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
 1 Ext.namespace('Ext.ui.plugins');
 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: [510152025305075100200300500],
 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)

 

 

posted on 2011-04-15 00:32 小山982 阅读(...) 评论(...) 编辑 收藏