O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Grid paging

The grid panel supports paging through a large set of data via a PagingToolBar item. To accomplish this we have to do some modifications to our store and add a PagingToolBar item to our grid.

First we need to create our store as shown in the following code:

Ext.create('Ext.data.Store', {
  autoLoad:true,
  model:'Client',
  pageSize:10,
    proxy:{
    type:'ajax',
    url:'clients.php,
    reader:{
    type:'json',
    root:'data',
    totalProperty:'num'
  }
  }
});

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

Then we define our grid and the PagingToolbar item our grid will have:

/** * @classMyApp.view.GridPaging * @extendsExt.grid.Panel * @author ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required