ExtJS GridPanel Ajax Таблицы

В данном примере мы рассмотрим как в ExtJS производится формирование таблицы по AJAX-запросу.

1. Создадим хранилище для записи туда данных, полученных с сервера по AJAX-запросу.

var store = Ext.create('Ext.data.JsonStore', {// создание хранилища для удаленного источника данных
    fields: ['city', 'code'], // поля записей. каждая запись содержит название городва и телефон
    pageSize:7,// количество записей, считываемх за раз
    proxy: { описание proxy-объекта, кторый будет запрашивать сервер
        type: 'ajax', // тип прокси Ajax
        url: 'ajax.php' / адрес удаленного источника данных
        reader: {
            type: 'json', // тип данных jsonы
            root: 'phones'// свойство JSON объекта? в котором передается сам массив данных
        }
    }
});

store.load(); // загружаем данные

2. Создаем тестовое серверное приложение, которое будет отдавать данные в формате JSON. Для примера взята база данных телефонных кодов городов.
При GET-запросе к серверу задаются три параметра:
limit -  число записей на странице
page - номер страницы (в листалке страниц)
start - номер первой записи

На выходе требуется получить следующий JSON-код:

{'success': true, /* признак того что чение завершилось успешно */
  'total':100, /* общее количество записей на сервере для листалки страниц */
  'pnones': /* root из конфигурации reader.  */
  [
    {city:'Агинское',code:'391-42'},
    {city:'Алейск',code:'38553'},
    {city:'Алтайский',code:'38537'}
  ]
}

Ниже приводим код PHP-приложения формирующего ответ сервера:

$a=array('city'=> array('city'=>'Агинское','code'=>'391-42'),…));
$res=array_slice($a, $_GET['limit']*($_GET['page']-1),$_GET['limit']);
echo json_encode(array('sucess'=>true,'total'=>count($a),'phones'=>$res));

3. Инициализируем таблицу с листалкой страниц.

var grid = Ext.create('Ext.grid.Panel', {
    store: store, // хранилище
    title: 'Array Grid', // Заголовок
    columns:[
        {text: 'Город', dataIndex: 'city'},
        {text: 'Код', dataIndex: 'code'}
    ],
    bbar: new Ext.PagingToolbar({ // bbar - нижний тулбар с листалкой
        store: store, // хранилище
        displayInfo: true, // вывести информацию об общем числе записей
        displayMsg: 'Показано  {0} - {1} из {2}' // формат информации об общем числе записей
    })
});

4. Выводим окно с таблицей на экран.

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    closeAction: 'hide',
    width: 600,
    height: 350,
    items: [grid]
});

В результате выполнения данного кода ExtJS выведет на экран окно с таблицей следующего вида.