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