Question

I have a grid in my application that is configured with xtype : 'pagingtoolbar' and the store that related to this grid is configured with pageSize : 10, the result is that the pagingtoolbar is correctly dispayed (like following) but I have a scroller in the grid and all records are loaded in the grid. surely I’m missing sth in grid/store config :

Grid :

xtype : 'gridpanel',
store : mystore,
height : 350,
hidden : true,
columns : [ {
              dataIndex : 'firstName',
              text      : 'First Name',
              flex      : 1
            },{
              dataIndex : 'lastName',
              text      : 'Last Name',
              flex      : 1
            },{
              dataIndex : 'email',
              text      : 'Email',
              flex      : 1  
 }],
 dockedItems : [ {
        xtype : 'pagingtoolbar',
        hight : 28,
                    displayInfo : true,
        dock : 'bottom'
 } ]

Store :

Ext.define('Users',{
   extend: 'Ext.data.Store',
   model: usersModel,
   pageSize : 10,
   proxy: {
             type: 'ajax',
             url: 'servletURL',
             reader: {
                   type: 'json',
                   root: 'data',
                   successProperty: 'success',
                   totalProperty: 'total'
             },
            writer: {
               type : 'json',
               root: 'data' 
    },
    actionMethods: {
        read   : 'POST',
        create : 'POST',
        update : 'POST',
        destroy: 'POST'
    },

},
sortOnLoad: true,
sorters: { property: 'dateTimeTrx', direction : 'DESC' },

});

I’m correctly receiving data from server side, but I can’t display pages, all data is in one page even that the pagingtoolbar is correctly displayed as shown above, Any help in that? Thanks!

Answer 1

ExtJs pagingtoolbar is not responsible for extracting needed data from server response. Instead, your server has to response with exactly that data that should be displayed for the current page. In order to tell server what data is needed ExtJs would send additional params (something like ?start=0&page=1&limit=10). You have to form the response accordingly to this params.