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

}

});