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



           }



      });