The Grid – Basics of Paging

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 ".$_GET['start'].", ".$_GET['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).'})';

Were not going to dig much into the server side code, since it can vary quite a bit for each developers needs and environment.

Whats Needed to Make a Paged Grid?

NOTE: The example uses ScriptTagProxy only because the data resides on a different server from the example code. In most cases you will be pulling data from the same server 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'} ]) });

The Paging Bar

Adding a paging toolbar to the bottom of the grid pane, and your 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.

The Final Product

grid-paging.js

Ext.onReady(function(){ var ds = new Ext.data.Store({ // HttpProxy should be used here 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'} ]) }); var cm = new Ext.grid.ColumnModel([{ id: 'name', header: "Name", dataIndex: 'employee_name', width: 100 },{ header: "Title", dataIndex: 'job_title', width: 170 },{ header: "Hire Date", dataIndex: 'hire_date', width: 70, renderer: Ext.util.Format.dateRenderer('n/j/Y') },{ header: "Active", dataIndex: 'is_active', width: 50 }]); var grid = new Ext.grid.Grid('grid-paging', { ds: ds, cm: cm, autoExpandColumn: 'name' }); grid.render(); 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" }); ds.load({params:{start:0, limit:25}}); });

grid-paging-working.php

<html> <head> <title>Paging Grid Example</title> <link rel="stylesheet" type="text/css" href="/lib/resources/css/ext-all.css" /> <script type="text/javascript" src="/lib/yui-utilities.js"></script> <script type="text/javascript" src="/lib/ext-yui-adapter.js"></script> <script type="text/javascript" src="/lib/ext-all-debug.js"></script> <script type="text/javascript" src="grid-paging.js"></script> </head> <body> <div id="grid-paging" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div> </body> </html>