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: [ 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

 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: [ 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）