博客园_小山的窝

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

2011-04-14T16:32:00Z

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

按照国际惯例，先上一个效果图：

效果图1

效果图2

设计思路

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

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

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

代码说明：

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

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

下拉框插件的完整代码：

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 })

滑块插件的完整代码：

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）

本文链接

[原创]Flex中DataGrid分页（客户端、服务端）

2009-12-17T16:18:00Z

这两天做了一个Flex的DataGrid分页（paging）控件，支持客户端、服务端两种分页形式；这里着重分享一下思路，虽然是用flex做的，但只要掌握了思路，用别的编程语言也能达到同样的效果。

与领导相处：你直言百句不如让他犯错一次

2009-12-03T16:08:00Z

当你与领导就某一问题发生分歧时，你跟他直言你心中的看法，有时既使你再有道理，领导也未必会接受，哪怕他指不出你的问题在哪，他的好在哪，毕竟领导就是领导；这时候还不如充不懂，索性按领导的来，哪怕明知道是错的，有些弯路还是要走的，有些学费还是交的，这样印象才深刻。

[原创]Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)

2009-11-12T16:02:00Z

做一个小程序要用到Flex文本框自动提示的功能，因为时间不是很紧，所以决定自己动手做这个小组件，花了一个晚上的时间终于完成了。贴出来与大家分享一下。虽然网上有不少这样的组件，但自己动手做可以锻炼下思维及动手能力，且老吃现成饭，总感觉不是很爽……废话少说，进入正题。

[原创]JavaScript动态添加表格行（使用模板、标记）

2009-10-22T15:58:00Z

在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求，对于复杂的操作情况，比如：添加一行之后，在这一行上还要进行相关的操作会显得有些吃力；本人比较喜欢表现层使用模板、标记填充数据的做法，于是自己做手做了个小组件，与大家一起分享。

也谈谈权限管理：理想状态下的权限管理模型

2009-10-16T15:43:00Z

学计算机基本工作原理时，开始时以一个简化的计算机模型进行讲解，假如从实战角度出发，该模型机几乎无所作为，但有利于学习到事物的本质，在了解了本质之后，再从实际需求出发，一步步在模型机的基础上添砖加瓦，形成一个实战型的权限管理模块。

也谈谈权限管理：前言

2009-10-15T16:09:00Z

权限管理是所有信息系统的基础模块，在这一年多里我有幸参加大型ERP系统的开发，该ERP系统包括客户关系、销售、仓库、采购，财务，生产，人事等七大模块，其中权限主要由我小组负责开发，颇有心得。在园子里看到了不少的专门写权限的文章，其中还有一位大哥专门做权限的，写了不少这方面的文章，在动笔写这个系列之前，我专门抽了几个晚上的时间来仔细阅读他的文章，并与我的权限实现方案相比较，从中也受益不少；还专门看了下RBAC权限基于角色的权限控制的文章，在做了这些准备之后，初步决定按以下的思路进行书写

工作感言：磨平一些菱，爱惜你的角，做喜欢的事，积极地生活（完结篇）

2009-09-29T23:30:00Z

有人说，只要你到社会工作两年，它就能把你的激情耗尽，菱角磨平。后来又有人说：其实两年太长，只要一年就够了。亲身经历过之后，我发现这些话是有一定道理的，但也不全是这样的。刚开始工作的时候，满怀激情，什么事都想做到最好，容不下别人的失误……当你的积极被别人当成多管闲事，当你的成果得不到别人承认，当你做事喜欢较真的风格被人指责……这时是不是觉得太累了，还是像老油条一样过点小日子算了。但我觉得不应该是这样的，最重要的是调整自己的心态，做事的方式。

工作感言：项目收尾阶段之交流

2009-09-24T16:19:00Z

交流是贯穿整个项目之中的，项目收尾阶段，组外之间的交流尤为突出，交流不好，极容易出现问题，作为组长刚开始处理时觉得与组外人员交流很麻烦，因为大家的利益经常是对立，很容易把关系弄僵，但是后来细心观察、思考、实践后，发现一些小技巧，可以巧妙地解决很多问题，又何必大家争得脸红耳赤呢，现在回想起来还是别有一番乐趣的。

工作感言：项目收尾阶段管理

2009-09-18T15:06:00Z

项目从无到有，中间解决了一个个技术难题，有时为了赶进度，不知加了多少次班，终于到了收尾阶段，看到胜利的署光了，是不是该松口气了，不要忘了黎明前是最黑暗的，这时候对外的交流将更加明显和重要，项目将全部移交给测试人员进行测试，销售、实施人员将拿着产品去给客户演示、实施，中间一但出了问题，处理不当，责任将会像皮球一样踢来踢去，并极有可能上演“狗咬狗”大会。