From Learn About the Ext JavaScript Library

Рекомендую скачать исходники для работы с этим примером, чтобы сразу опробовать постраничную разбивку на практике. Здесь вы можете посмотреть работающий пример.

Данные для Грида

Для разбивки грида на страницы вам нужен код на сервере, отдающий данные постранично.

В этом примере мы в качестве серверного языка используем PHP, а в качестве базы данных MySQL с таблицей, заполненной случайно сгенерированными данными. Приведенный ниже скрипт основываясь на переданных ему панелью постраничной разбивки значениях переменных start и limit делает выборку соответствующей страницы из БД и возвращает ее в формате JSON.

$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).'})';

Серверный код приведен в самом общем виде, и мы не будем его подробно рассматривать, так-как он будет различаться в зависимости от задач разработчика и разрабатываемого приложения.

Что требуется для создания грида с постраничной разбивкой?

Обратите внимание: В этом примере для получения данных используется ScriptTagProxy из-за того, что источник данных находится на другом домене, чем приложение. Если в вашем случае это не так, используйте HttpProxy.

Единственное отличие от обычного грида при создании data Store в появлении параметра totalProperty. В нашем случае мы объявляем, что полное количество строк без учета разбития на страницы будет передаваться с сервера в параметре 'totlal'.

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'}
        ])
 
    });

Панель постраничной разбивки

Добавьте панель для постраничной разбивки внизу страницы и все практически готово.

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"
    });

Последний шаг – передача серверу начальных значений параметров start и limit.

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

Как видите, добавление к гриду постраничной разбивки делается очень просто. Самым сложным здесь будет разработка серверной части программы, которая будет делать всю работу по выборке данных из базы постранично и отдаче ее Ext-у.