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',
      }
    }