码迷,mamicode.com
首页 > Web开发 > 详细

PagingToolbarResizer.js的使用注意事项! (转)

时间:2015-08-14 11:12:30      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

GRID应该是EXTJS中使用最频繁的组件了,通过JSON可以实现分页显示。

笔者通过使用Ext.ux.plugin.PagingToolbarResizer插件,可以实现客户自定义每页显示的记录数(类似的插件还比较多)
 
插件代码:
 1 Ext.namespace(‘Ext.ux.plugin‘);
 2 Ext.ux.plugin.PagingToolbarResizer = Ext.extend(Object, {
 3   options: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500, 1000],
 4   mode: ‘remote‘,
 5   displayText: ‘记录数‘,
 6   prependCombo: false,
 7   constructor: function(config){
 8     Ext.apply(this, config);
 9     Ext.ux.plugin.PagingToolbarResizer.superclass.constructor.call(this, config);
10   },
11  
12   init : function(pagingToolbar) {
13 var comboStore = this.options;
14  
15     var combo = new Ext.form.ComboBox({
16       typeAhead: false,
17       triggerAction: ‘all‘,
18       forceSelection: true,
19       selectOnFocus:true,
20       lazyRender:true,
21       editable: false,
22       mode: this.mode,
23       value: pagingToolbar.pageSize,
24       width:50,
25       store: comboStore,
26       listeners: {
27         select: function(combo, value, i){
28           pagingToolbar.pageSize = comboStore[i];
29           pagingToolbar.doLoad(Math.floor(pagingToolbar.cursor/pagingToolbar.pageSize)*pagingToolbar.pageSize);
30         }
31       }
32     });
33  
34     var index = 0;
35     
36     if (this.prependCombo){
37      index = pagingToolbar.items.indexOf(pagingToolbar.first);
38      index--;
39     } else{
40      index = pagingToolbar.items.indexOf(pagingToolbar.refresh);
41         pagingToolbar.insert(++index,‘-‘);
42     }
43     
44     pagingToolbar.insert(++index, this.displayText);
45     pagingToolbar.insert(++index, combo);
46     
47     if (this.prependCombo){
48      pagingToolbar.insert(++index,‘-‘);
49     }
50     
51     //destroy combobox before destroying the paging toolbar
52     pagingToolbar.on({
53       beforedestroy: function(){
54      combo.destroy();
55       }
56     });
57  
58   }
59 });

 

------------
插件使用方式:
1 bbar:new Ext.PagingToolbar(
2 {
3 pageSize:limit,
4 store:ds,
5 displayInfo:true,
6 emptyMsg:"没有登记文件",
7 plugins : [new Ext.ux.plugin.PagingToolbarResizer( {options : [20, 40,60,80,100,200,500,1000], prependCombo: true})],
8 displayMsg:‘显示第 {0} 条到 {1} 条文件,一共 {2} 个文件‘
9 }),

 

...
 
---------------
使用界面:
技术分享
实际GRID在使用中,经常会进行查询操作,如果处理不当回出现,用户定义的分页记录发生改变
笔者是这样处理的
1:定义每页显示的记录数量至一变量
2:在插件PagingToolbar的change事件进行监听,改变分页变量值
代码如下:
var limit=20;
...
bbar:new Ext.PagingToolbar(
...
{"change":function (t,p)
 {limit=this.pageSize;
 }
},
...
ds.removeAll();
start=0;
ds.reload({params:start:start,limit:limit}})
...

PagingToolbarResizer.js的使用注意事项! (转)

标签:

原文地址:http://www.cnblogs.com/yuanhui69/p/4729242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!