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 Armando Gonzalez <[email protected]> * This the grid paging example. */ Ext.define('MyApp.view.GridPaging', { extend: 'Ext.grid.Panel', flex:1, title:'Clients', initComponent: function() {...