From Learn About the Ext JavaScript Library

I would suggest downloading the code used for this example here so you have something to work with. A working example can be found here.

Grid Data

A paging grid must have a server side element to perform the breaking up of data into pages.

For this example we are using php as the server side language, and a MySQL database with some randomly generated data. The PHP script below is used to retrieve our data and break it up into pages using the limit and start variables that are passed from the paging toolbar.

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") 
	or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
 
$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ". (int) $_POST['start'].", ". (int) $_POST['limit'];
 
$rs_count = mysql_query($sql_count);
 
$rows = mysql_num_rows($rs_count);
 
$rs = mysql_query($sql);
 
while($obj = mysql_fetch_object($rs))
{
	$arr[] = $obj;
}
 
echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

We're not going to dig much into the server side code, since it can vary quite a bit with each developer's needs and environment.

What's Needed to Make a Paged Grid?

NOTE: The example uses ScriptTagProxy only because the data resides on a different domain from the example code. In most cases you will be pulling data from the same domain the code resides on and using HttpProxy.

The only difference in the data Store is the addition of a totalProperty declaration. In our example, we use 'total' which is coming from our server side script with the value for the total number of rows we had before breaking them up into pages.

var ds = new Ext.data.Store({
 
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
        }),
 
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        }, [
            {name: 'employee_name', mapping: 'name'},
            {name: 'job_title', mapping: 'title'},
            {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
            {name: 'is_active', mapping: 'active'}
        ])
 
    });

You can use a normal column model and grid just as with any other grid since there are no differences in your column model and grid from a paged to a non-paged grid.

The Paging Bar

Adding a paging toolbar to the bottom of the grid pane, and you're almost done.

var gridFoot = grid.getView().getFooterPanel(true);
 
var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 25,
    displayInfo: true,
    displayMsg: 'Displaying results {0} - {1} of {2}',
    emptyMsg: "No results to display"
});

The last step is to pass the initial start and limit parameters to your data load.

ds.load({params:{start:0, limit:25}});

A large portion of the time spent setting up paging is going to be your server side environment that handles passing data back and forth with the grid. Once you have that in place, the task of adding paging to a grid can be very simple.

• Ext Programmer's API Documentation
• Ext User Forums