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