Ext-js 分页实现 (后台用Spring MVC)
假定我们现在每页只显示25个Item(产品条目)，而现在数据库里面有33条Item记录，所以应该分2页显示
显示结果：
第一页：
当你选择底部分分页栏的 向后箭头 ，或者直接在输入框里面输入页码，比如2的时候
他会自动翻到第二页
技术实现：
只需要改2个文件：
1. B/E ,在Spring控制器里面（对应这个例子是ItemController），加入如下代码，用于显示在指定区间里面的总记录的子集
从 //the pagination feature by Charles 注解部分开始,主要做了以下事情：
（1） 分离从ext-js传来的参数，其中start是起始页，limit是每页最大显示多少记录数（我们采用25）
（2） 参数正确性检查
（3） 计算实际该页要显示的记录数（考虑到尾页情况，所以这个记录数是 limit和total-start的较小值
（4） 创建一个Json对象返回，并且它包含3个信息【success ,total,data】
Success还和以前一样，表示给Extjs前端判断的操作成功与否
Total: 表示总记录数，必须传给客户端，从而让框架帮计算出需要的页数
Data: 这个页面要显示的数据集合（总数据集的子集）
2. 在F/E的Extjs中用于显示页面的视图中(对应ItemPanel.js)，加入以下信息，见粗体字显示部分：
（1）创建一个bbar控件(bbar 表示bottom bar,表示底部分页控件)
（2）设置一些参数用于显示控件的外观
（3）设置doLoad方法，用于每次将新的设定的start和limit参数传递给B/E的Spring控制器
- Ext.define('CA.view.item.ItemPanel', {
- extend : 'Ext.Viewport',
- alias : 'widget.itempanel',
- layout : 'anchor',
- requires : ['CA.view.item.ItemGridList'],
- autoShow : true,
- initComponent : function() {
- console.log("creating the CA.view.item.ItemPanel panel");
- this.items = [
- header = Ext.create('CA.view.header.Header'),
- menuToolBar = Ext.create('CA.view.main.MenuToolBar'),
- itemGridList = Ext.create('CA.view.item.ItemGridList'),
- bbar = new Ext.PagingToolbar({ //-======定义翻页控件
- pageSize : 25, // 参数1：每页显示数
- store : 'Item', // 数据源---非常重要
- displayInfo : true,
- beforePageText : '第',
- afterPageText : '/{0}页',
- firstText : '首页',
- prevText : '上一页',
- nextText : '下一页',
- lastText : '尾页',
- refreshText : '刷新',
- displayMsg : '显示第{0}条数据到{1}条数据,一共有{2}条',
- emptyMsg : '没有记录',
- doLoad : function(start) {
- //点下一页时,会把把新的start和limit传入后台
- record_start = start;
- var o = {}, pn = this.paramNames;
- o[pn.start] = start;
- o[pn.limit] = this.pageSize;
- store.load( {params:o});
- }
- })];
- this.callParent(arguments);
- }
- });
本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/834224，如需转载请自行联系原作者