Implementing data paging
Paging increases your application's efficiency. As paging reduces the amount of data exchanged with the server, it decreases the time required for the browser to render records as well as the resources needed to cache them.
In this recipe, a grid component that displays information about movies will display paged data returned by the server. The grid will use a paging toolbar to provide a means for navigating the paged data, as well as the ability to count the number of records and pages.
How to do it...
1. Create the data store:
var store = new Ext.data.JsonStore({ url: 'grid-paging-remote.php', root: 'movies', idProperty: 'id', totalProperty: 'count', fields: ['id', 'title', 'release_year', 'rating'], remoteSort: true });
2. Set the default sort:
store.setDefaultSort('release_year', 'desc');
3. Define the grid panel:
Ext.onReady(function() { var grid = new Ext.grid.GridPanel({ title: 'Movies', store: store, columns: [ { header: "ID", width: 30, dataIndex: 'id', sortable...