Adding a paging toolbar for large datasets

1. Define a Store with an AjaxProxy for binding to the grid. Set the store's pageSize
configuration option to 50. Assign the store to the variable invoiceStore:
var invoiceStore = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'Invoice',
pageSize: 50,
proxy: {
type: 'ajax',
url: 'invoices.php',
reader: {
type: 'json',
root: 'rows'
}
}
});

2. Create a grid that is bound to the invoiceStore (created in step 1) with the
following column configuration:
Ext.create('Ext.grid.Panel', {
title: 'Paging Toolbar',
height: 300,
width: 600,
store: invoiceStore,
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1
}, {
header: 'Date',
dataIndex: 'Date'
}, {
header: 'Amount',
dataIndex: 'Amount'
}, {
header: 'Status',
dataIndex: 'Status'
}],
renderTo: Ext.getBody()
});

3. In the grid's configuration add an Ext.PagingToolbar docked to the bottom of the
grid through the bbar config option. The paging toolbar should also be bound to the
same Store as the grid (invoiceStore):
Ext.create('Ext.grid.Panel', {
...
bbar: Ext.create('Ext.PagingToolbar', {
store: invoiceStore,
displayInfo: true,
displayMsg: 'Displaying Invoices {0} - {1} of {2}',
emptyMsg: "No invoices to display"
})
...
});