Ext JS Grid中的分页

Question

I have to create a grid with pagination. The json data needed for the store will get in an ajax call. Here I created store and it is loaded with the data returned from ajax call. But the grid displaying all the data returned. I have to limit it into 5 for each page.

I tried the following code,

      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}
          ]
      });

Any help is must appreciated...Thankyou

Answer 1

By using PagingToolbar u can limit the grid size to 5 In that toolbar you can declare grid like this

 pageSize: 5,

Example for PagingToolbar is here !

Hope this helps you.....

Answer 2

You need to handle te pagination in your backend too. Thats probably the reason why you get all your records. ExtJS just sends the parameters to your backend and expect it will return the right records.

In MySQL (offset = start, limit = limit, your page will be 1 here):

SELECT column FROM table
OFFSET 0 LIMIT 5