Book Image

Learning Ext JS_Fourth Edition

Book Image

Learning Ext JS_Fourth Edition

Overview of this book

Table of Contents (22 chapters)
Learning Ext JS Fourth Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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...