ExtJS实现分页grid paging

背景

    分页查询在Web页面中比例很大，我自己也写过分页框架，也用过很多第三方分页。

• 基于jquery的dataTables，那么多例子、清晰API、应用广泛、开源，即使是新手也可以很快上手。

• ExtJS的分页功能，封装的很简单，因其例子少、API复杂、国内应用较少，往往需要先对ExtJS有整体认识、孰知API之后，才应用自如。感觉比较不易，以至于一个简单的分页功能我也想写下来。

例子

ExtJS版本：4.2

我认为ExtJS也有MVC分层概念，所以接下来会分展示层、数据模型层来描述。

展示层（view），在表格grid中添加分页控件bbar（代码如下）。其中store属性须要替换，不太清楚ExtJS为什么不直接用所在grid的store。

 

       bbar : {
         xtype : 'pagingtoolbar',
         store : 'XXXStore',
         displayInfo : true,
         displayMsg : '显示 {2} 条中的第 {0} 条到第 {1} 条',
         emptyMsg : "没有满足查询条件的"
       }

 

数据模型层（model），在store中指定数据总条数的属性名，如设置为totalCount，后台response中也要有此属性。

1. proxy : {
      ...
      reader : {
        ...
        totalProperty: 'totalCount',
      }
    }