PHP5

Постраничный вывод

В предыдущих параграфах мы выводили все данные в таблицу. Однако более детальная настройка связки хранилище+грид позволяет нам также настроить и вывод данных в таблицу. Так, мы можем задать ограничение на количество выводимых данных и как бы пролистывать их в гриде, то есть сделать постраничный вывод (paging).

Для этого нам, во-первых, надо настроить хранилище:

var store = Ext.create('Ext.data.Store', {
        model: 'User',
		autoLoad: true,
		pageSize: 4,
        proxy: {
            type: 'ajax',
            url: 'users.php',
            reader:{
                type:'json',
                root: 'users'
            }
        }
    });

По сравнению с примерами хранилища в предыдущих параграфах здесь было использовано свойство pageSize. Оно показывает, сколько объектов будет получать за раз хранилище (то есть в данном случае 4 объекта).

Теперь настроим грид. Здесь нам надо применить плагин Ext.toolbar.Paging:

Ext.create('Ext.grid.Panel', {
        title: 'Пользователи',
        height: 200,
        width: 550,
		margin:10,
        store: store,
		dockedItems: [{
			xtype: 'pagingtoolbar',
			store:store,
			dock: 'bottom',
			displayInfo: true,
			beforePageText: 'Страница',
			afterPageText: 'из {0}',
			displayMsg: 'Пользователи {0} - {1} из {2}'
		}],
        columns: [{
           xtype:'rownumberer'
          },{
           text:'Имя',
           xtype:'templatecolumn',
           flex:1,
           dataIndex:'name',
           tpl:'{name} {surname}'
      },{
            header: 'Дата рождения',
            dataIndex: 'date',
            xtype:'datecolumn',
            format: 'd/m/Y',
            flex:1
        },{
            header: 'E-mail',
            dataIndex: 'email',
            flex:1
        },{
            text:'Женат/Замужем',
            xtype:'booleancolumn',
            width:90,
            dataIndex:'married',
            trueText:'Да',
            falseText:'Нет'
        },{
    xtype:'actioncolumn',
    width:40,
    items:[{
            icon:'del.png',
            handler:function (grid, rowIndex, colIndex) {
				store.removeAt(rowIndex);
            }
        }]
	}],
        renderTo: Ext.getBody()
    });

Само объявление тулбара находится в следующих строках:

	dockedItems: [{
			xtype: 'pagingtoolbar',
			store:store,
			dock: 'bottom',
			displayInfo: true,
			beforePageText: 'Страница',
			afterPageText: 'из {0}',
			displayMsg: 'Пользователи {0} - {1} из {2}'
		}]

С помощью параметра store мы привязываем тулбар к хранилищу грида. Параметр dock задает положение тулбара на странице, а остальные параметры отвечают за вывод информации плагина.

Теперь перейдем к ресурсу на сервере, который будет посылать хранилищу данные в формате json. В нашем случае это файл users.php.

При применении плагина приложение будет отправлять запросы к users.php в виде GET-запроса типа http://localhost/helloext/users.php?_dc=1372956099996&page=2&start=4&limit=4, в котором приложение передает ряд параметров серверу для выборки данных.

Это параметры:

• page: номер страницы для отображения в гриде

• start: номер объекта, с которого надо получить данные

• limit: размер данных, собственно, который и объявлен у нас в хранилище в параметре pageSize.

Мы можем получить эти параметры в users.php и в соответствии с ними отправлять определенные данные в ответ приложению в виде объекта json:

<?php
header('Content-type: application/json');
$limit=$_GET['limit'];
$page=$_GET['page'];
$start=$_GET['start'];
if($page=="1"){
    echo '{
	"success": true,
	"total":8,
	"users": [{
        "userID": 1,
        "name": "Вася",
		"surname": "Иванов",
        "date": "10/08/1991",
        "email": "vasiv@mail.ru",
		"married": false
    }, {
        "userID": 2,
        "name": "Петя",
		"surname": "Федоров",
        "date": "03/08/1993",
        "email": "petfed@yandex.ru",
		"married": true
    }, {
        "userID": 3,
        "name": "Вова",
		"surname": "Кузнецов",
        "date": "11/07/1989",
        "email": "vok@mail.ru",
		"married": false
    }, {
        "userID": 4,
        "name": "Саша",
		"surname": "Сидоров",
        "date": "05/08/1991",
        "email": "vvvs@mail.ru",
		"married": true
    }]
}';
}
?>

В реальном приложении мы могли осуществлять запрос к бд, например, mysql, на получение limit данных, начиная с номера start.

В итоге, получив данные, мы можем использовать навигацию по страницам в гриде:

comments powered by Disqus