Infinite scrolling

Ext JS offers us an alternative to the PagingToolbar item. In Ext JS 4, a new type of grid, called the infinite scrolling grid, was introduced. In Ext JS 5, that grid is deprecated, and now it depends on Ext.data.BufferedStore. To understand more about the buffered store, see http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.BufferedStore.

So, Ext.data.BufferedStore gives the grid the ability to render thousands of records without needing the PagingToolbar item. The grid should be bound to a store with a pageSize property that will load data dynamically according to the pageSize property.

Let's see an example. First, we need to add some configuration to our store:

Ext.define('Myapp.store.clients',{
  extend:'Ext.data.BufferedStore',
  model: 'Myapp.model.Customer',
  autoLoad: true,
  leadingBufferZone: 150,
  pageSize: 100,
  proxy:{
    type:'ajax',
    url: 'serverside/clients.php',
    reader: {
      type:'json',
      rootProperty:'records',
      totalProperty...