Learning Ext JS - Fourth Edition

Grid paging

The Grid panel supports paging through a large set of data with the help of a PagingToolbar item. To accomplish this we have to make some modifications to our store and add a PagingToolbar item to our grid. For this, we need to create our store, as shown in the following code:

Ext.define('Myapp.store.customers.CustomersC',{
  extend:'Ext.data.Store',
  model: 'Myapp.model.Customer',
  pageSize: 3,
  autoLoad:true,
  proxy:{
    type:'ajax',
    url: 'serverside/customersc.php',
    reader: {
      type:'json',
      rootProperty:'records',
      totalProperty:'total'
    },
    actionMethods :{read:'POST'}
  }
});

In the definition of our store, we declared a pageSize property of 3 and defined a proxy so that we can get the data from the server. Thus, we will be able to paginate ...