.. / 8.2 ExtJS: GridPanel загрузка данных из Ajax

Пример из первой части малоинтересен, потому что в больших приложениях, для которых рассчитан ExtJS данные выбираются из удаленных источников. В этой части разберу пример выборки таблицы по Ajax-запросу. Громоздить что-то в виде полноценного приложения с SQL не буду, а соберу маленький php-имитатор большой базы данных. А по ходу рассмотрения примеров буду его модифицировать, добавляя отсутствующие функции.

1

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

    var store = Ext.create('Ext.data.JsonStore', {     // определение хранилища для удаленного источника данных
        fields: ['city', 'code'],   // поля записей. каждая запись содержит - название городва и телефон
        pageSize:7,                 // количество считываемх зАраз записей
        proxy: {                    // описание proxy-объекта, кторый будет запрашивать сервер
            type: 'ajax',           // тип прокси = Ajax
            url: '610.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'}
          ………………………….
        ]
      }

!!! хотя в примерах почти нигде нет, без него листалка в ext4 не заработала. Было найдено в здесь и здесь

Код php-приложения не буду комментировать. Итак все должно быть ясно. Это все же не GoldFusion, который зачем-то засунули в примеры в книжке «Learning Ext JS»

$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));

4

Тут я добрался до инициализации таблички с листалкой.

    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}' // формат инфо
        })
    });

За пределами рассмотрения остался вопрос о всяких форматах и темплейтах. ЕБЖ, разберу

Ну и собственно код вывода таблички в окно. Там все совпадает с предыдущим примером, но я его все же приведу

var win1 = Ext.create('widget.window', {
        title: 'Пример',
        closeAction: 'hide',
        width: 600,
        height: 350,
        items: [grid]
    });

Показать Ajax - табличку

5

За кадром осталось очень много - работа с XML, динамика, редактируемые таблички и т.п. К этому я обязательно вернусь позже

UPD

Не захотела работать в примере с MVC. Использован вариант см. ниже. Какая-то фича ExtJS 4. Х.З. как правильно?

dockedItems: [{   // bbar - нижний тулбар с листалкой
               dock: 'bottom',
                xtype:'pagingtoolbar',
                store:store,               // указано хранилище
                displayInfo: true,          // вывести инфо обо общем числе записей
                displayMsg: 'Показано  {0} - {1} из {2}' // формат инфо
        }]

Далее

1. GridPanel - таблички. Часть 3 Редактирование полей
2. GridPanel - таблички. Часть 4 Редактирование полей (продолжение)
3. Form. Часть 1 - простые компооненты
4. Form. Часть 2 - составные компоненты
5. Form. Часть 3 - Submit
6. Деревья в ExtJS. Часть 1. Инициализация