Ext JS Grid中的分頁

Question

我必須創建帶有分頁的網格。 存儲所需的json數據將在ajax調用中獲得。 在這里，我創建了存儲，並加載了從ajax調用返回的數據。 但是網格顯示所有返回的數據。 我必須將其限制為每頁5個。

我嘗試了以下代碼，

      var store= new Ext.data.JsonStore({
        autoLoad    : {params: {start: 0, limit: 5}},
        totalProperty   : recordCount,
        sortInfo    : { field: "POS", direction: "ASC" },
        idProperty  : 'POS',
        data        : {},
        fields      : [
                        {'name' : 'POS'},
                        {'name' : 'NUM'}, 
                        {'name' : 'TIT'},
                        {'name' : 'MEN'},
                        {'name' : 'EIH'},
                        {'name' : 'WAE'},
                        {'name' : 'PRI'},
                        {'name' : 'LIF'}], 

    });

    var adrConn = $.getJSON('ajax.cfm', $.extend(test, {
        }), function(r) {   
            activeData = r.DATA;
            store.loadData(activeData);
            }
    );

    var grid = new Ext.grid.GridPanel({
          title         : '» test',
          applyTo       : 'panel',
          width         : 1000,
          loadMask      : false,
          autoHeight    : true,
          viewConfig    : {
                emptyText   : 'No data to display'
          },             
          tbar          : mainGridToolbar,
          bbar          : new Ext.PagingToolbar({
                  store         : store,
                  displayInfo   : true  
          }),
          store         : store,
          columns: [
                {header: "1", width : 50, dataIndex: 'POS', sortable: true},
                {header: "2", dataIndex: 'NUM', sortable: true},
                {header: "3", dataIndex: 'TIT', sortable: true},
                {header: "4", dataIndex: 'MEN', sortable: true},
                {header: "5", dataIndex: 'EIH', sortable: true},
                {header: "6", dataIndex: 'WAE', sortable: true},
                {header: "7", dataIndex: 'PRI', sortable: true},
                {header: "8", dataIndex: 'LIF', sortable: true}
          ]
      });

任何幫助都必須感謝...謝謝

Answer 1

通過使用PagingToolbar，您可以將網格大小限制為5。在該工具欄中，您可以像這樣聲明網格

 pageSize: 5,

這里是PagingToolbar的示例！

希望這可以幫助您.....

Answer 2

您還需要在后端處理分頁。 那可能就是您獲得所有記錄的原因。 ExtJS只是將參數發送到您的后端，並期望它將返回正確的記錄。

在MySQL中（偏移量=開始，限制=限制，您的頁面在此處為1）：

SELECT column FROM table
OFFSET 0 LIMIT 5