Paging with ExtJs Grid Widget (Updated for ExtJS 2.2)

Updated for ExtJS 2 :

Paging has changed a bit for ExtJS 2.0 from ExtJS 1.0 . In order to get grid paging to work with the grid component on ExtJS 2.2

1. Create the paging toolbar.

var store = this is the same store used by the grid component

var pagesize = 25;
var paging_toolbar = new Ext.PagingToolbar({
pageSize: pagesize,
displayInfo: true,
emptyMsg: 'No data found',
store: store
})

2. Put the toolbar into the bottom bar of the grid component

var grid = new Ext.grid.GridPanel({
id:'mygrid',
title:'My Grid',
columns:[define your columns here]
store:store,
  bbar:paging_toolbar
})

3. Call the data store's load function with start and limit parameters. Initially, start should be 0 while limit is the pagesize you pass to the paging toolbar
   

store.load({params:{start:0,limit:pagesize}});

There is very comprehensive FAQ on the ExtJS wiki about the grids component. I encourage anyone who is having trouble with the ExtJS grid component to consult the FAQ.

The item in the FAQ that tackles paging can be found here.

Deprecated : ExtJS 1.0.1 is no longer available but I'm keeping the old content available below just case anybody still uses it for some reason. If you still are, though, I strongly suggest that you should upgrade to ExtJS 2.

There's lots of things to love about ExtJs. The grid widget is one of them. With ExtJs 1.0.1, paging has never been easier. Click the title for a quick tutorial about paging with the grid. If you're new to ExtJS there is a beginner's guide here.

Once you've defined your grid. The snippet below is one of the things you need to add in order to make the paging toolbar appear on your grid.

// create paging
var gridFoot = datagrid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, dataModel, {
pageSize: 20,
displayInfo: true,
displaymsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No records found"
});
paging.bind(dataModel);