CODEWITHSUNDEEP
paginationgridextjs4store
Adil
Adil

Reputation: 4623

How remove scroller in grid with paging - Ext JS 4

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 : paging toolbar

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!

Upvotes: 0

Views: 298

Answers (1)

Molecular Man
Molecular Man

Reputation: 22386

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.

Upvotes: 1

Related Questions