Ext表格自定义分页大小 插件

2018-06-24 01:43:16来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

代码如下:

 1 /*
 2  * Ext表格自定义分页大小 插件
 3  * 
 4  * 示例PagingToolbar
 5     brr = new Ext.ux.PagingToolbar({
 6                 plugins: new Ext.ui.plugins.ComboPageSize(),
 7                 pageSize : 25,
 8                 store : ds,
 9                 displayInfo : true,
10                 displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
11                 emptyMsg : "没有记录"
12     });
13     示例查询
14     ds.load({
15          params : Ext.apply({
16                      start : 0,
17                      limit : brr.pageSize
18              },dsx.baseParams)
19      });
20  * 
21  */
22 Ext.namespace('Ext.ui.plugins');
23 
24 Ext.ui.plugins.ComboPageSize = function(config) {
25     Ext.apply(this, config);
26 };
27 
28 Ext.extend(Ext.ui.plugins.ComboPageSize, Ext.util.Observable, {
29 
30     pageSizes: [15, 20, 50, 100],
31     prefixText: '每页显示',
32     postfixText: '条',
33     addToItem: true,    //true添加到items中去,配合index;false则直接添加到最后
34     index: 8,           //在items中的位置
35     init: function(pagingToolbar) {
36         var ps = this.pageSizes;
37         var combo = new Ext.form.ComboBox({
38             typeAhead: true,
39             triggerAction: 'all',
40             lazyRender: true,
41             mode: 'local',
42             width: 50,
43             store: ps,
44             enableKeyEvents: true,
45             editable: false,
46             loadPages: function() {
47                 var rowIndex = 0;
48                 var gp = pagingToolbar.findParentBy(
49                                 function(ct, cmp) { return (ct instanceof Ext.grid.GridPanel) ? true : false; }
50                               );
51                 var sm = gp.getSelectionModel();
52                 if (undefined != sm && sm.hasSelection()) {
53                     if (sm instanceof Ext.grid.RowSelectionModel) {
54                         rowIndex = gp.store.indexOf(sm.getSelected());
55                     } else if (sm instanceof Ext.grid.CellSelectionModel) {
56                         rowIndex = sm.getSelectedCell()[0];
57                     }
58                 }
59                 rowIndex += pagingToolbar.cursor;
60                 pagingToolbar.doLoad(Math.floor(rowIndex / pagingToolbar.pageSize) * pagingToolbar.pageSize);
61             },
62             listeners: {
63                 select: function(c, r, i) {//select和blur事件不可共存
64                     pagingToolbar.pageSize = ps[i];
65                     this.loadPages();
66                 }
67             }
68         });
69         if (this.addToItem) {
70             var inputIndex = this.index;
71             if (inputIndex > pagingToolbar.items.length) inputIndex = pagingToolbar.items.length;
72             pagingToolbar.insert(++inputIndex, '-');
73             pagingToolbar.insert(++inputIndex, this.prefixText);
74             pagingToolbar.insert(++inputIndex, combo);
75             pagingToolbar.insert(++inputIndex, this.postfixText);
76         }
77         else {
78             pagingToolbar.add('-');
79             pagingToolbar.add(this.prefixText);
80             pagingToolbar.add(combo);
81             pagingToolbar.add(this.postfixText);
82         }
83         pagingToolbar.on({
84             beforedestroy: function() {
85                 combo.destroy();
86             },
87             change: function() {
88                 combo.setValue(pagingToolbar.pageSize);
89             }
90         });
91 
92     }
93 });
View Code

效果图:

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:React中类定义组件constructor 和super

下一篇:1.通过正则表达式,字符串中提取数字