.. / 8.1 ExtJS: GridPanel — типа таблички с данными

Табличка GridPanel очень навороченный компонент и прежде чем начать с ней работать необходимо определить терминологию и заодно определиться с тем что и откуда в ней берется.

1. Store (хранилище) - мега-объект Ext.data.Store для хранения, чтения, записи (write), выборки данных организованных в виде двухмерного массива (массива записей).
   Storage предоставляет интерфейс для манипуляции данными другим комонентам ExtJS, таким как таблички, графики, диаграмы, вякого рода селекты и т.п. Интрефейс для всех визуальных компонент единый, хотя чтение-запись-выборка данных может осуществляться из статических массивов, XML, JSON.
   Данные для Storage могут быть полученыв как из локальных источников (например смассив или HTML-табличка), так и из удаленных (в смысле с сервера). Соответственно Storage, который обеспечивает данными много разных компонент, позволяет этим компонентам абстрагироваться от того, где реально эти данные хранятся.
2. Record (запись) - объект Ext.data.Record, соответствующий одной записи в таблице данных. Он отвечает за непосредственное чтение и запись данных, и состоит из целого ряда методов, которые читают-пишут данные из массивов, JSON-объектов и т.п. и т.п.
   Для организации чтения и записи также существует целый ряд proxy-методов. Например наиболее щироко распростанен AjaxProxy, который используется непосредственно для загрузки и выгрузки данных на сервер через AJAX/REST-запросы, для последующей записи в хранилище.
3. Grid (табличка) - объект Ext.grid.GridPanel, который позволяет визуально отображать и манипулировать данными их хранилища (Store)
4. Column (колонка) - объект Ext.grid.column, который отвечает за отображение и поведение колонок в таблице

1. Самая простая GridPanel

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

1.1 Определяю данные в виде двухмерного массива. Каждая строка массива - одна запись (record) Данные взяты из примера с официального сайта. Наверное это изменение котировок акций.

    // статические данные - массив, по которому строится табличка GridPanel
    // !! кроме статики есть еще и динамика, но об этом позже
    var myData = [
        ['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
        ['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
        ['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
    ];

1.2 Определяю индексы полей в каждой записи. В этом примере для краткости будут выводится только первые два поля - название компании и цена:

    // определяются индексы полей для MyData.
    // по этим даным будет сконфигурирован объект Ext.data.Record
    var fields = [
           {name: 'company'},
           {name: 'price',
           type: 'float'}  // тип данных
        ];

тип данных [int,float,number,string,date] - необязательный параметр, но если поле не строковое его надо указывать.

Нужно обратить внимание на

1.3 Определяю колонки таблицы - их заголовки и индексы полей, которые будут отображаться в кажой колонке:

    // здесь определяются колонки таблицы (Ext.grid.column) - и их связь с данными, в соответствии с теми индексами,
    // которые указали выше в массиве индексов fields
    var col =  [
            {
                text: 'Company',       // заголовок колонки
                dataIndex: 'company'  // индекс поля из хранилища (fields)
            },{
                text: 'Price',
                dataIndex: 'price'
            }
        ];

1.4 Определяю хранилище, для данных из массива myData

    // Создание хранилища (Store)
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: fields,  // указали массив индексов полей.
        data: myData     // указали откуда брать данные
    });

1.5 Создаю сам компонент Ext.grid.Panel, который будет отображать табличку с данными

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,               // определили хранилище
        title: 'Array Grid',        // Заголовок
        columns:col                 // указали массив колонок
    });

Ну и наконец создаю окно, куда встраиваю grid.Panel

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

<button onclick=«win1.show()»>Показать простую табличку</button>

Показать простую табличку

2 Немного украшательств

В этом примере выведем все данные в табличке. Для этого переопределим конфигурацию колонок:

Код для полей будет следующим (в комментариях не нуждается)

 // определяются индексы полей для MyData:
    var fields = [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name:'lastmod', type:'date'}
        ];

А вот в колонках (col) я наведу красоту. И подробно разберу для каждого элемента

2.1

{   text: 'Company',       // заголовок колонки
    dataIndex: 'company',  // индекс поля из хранилища (fields)
    renderer: function(val){    // кастомно отформатировали
          return '<a href=«http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27»>'+val+'</a>';}
}

При выводе названия компании я переделал обычную строку в виде ссылки на яндекс. Соответственно, renderer - это функция которая задает HTML-представление элемента, который прланируется отображать в данной колонке.

2.2

{ text: 'Price',
  dataIndex: 'price',
  format:'0.00',            // формат вывод числа (три нуля после запятой)
  xtype: 'numbercolumn'      // указание xtype необходимо для форматирования
}

Прайс выглядит неровно. Я отформатировал стоимость так, чтобы всегда были две цифры после запятой
И вот тут был геморрой. Если в примерах, на которых указана ссылка все работало, в ExtJS 4 все заработало только после указания xtype='numbercolumn'. Об этом я скажу подробнее ниже.

2.3

{ text: 'Change',
    dataIndex: 'change',
    visible:false               // эту колонку просто спрятали
}

Колонку change я просто спрятал. Но если пощелкать мышкойпо заголовку таблицы, можно вывести список отображаемых колонок и вывести спрятанную колонку на панель.

2.4

  { text: '% Change',
      dataIndex: 'pctChange',
      width: 165, // ширина колонки
      sortable: false,            // заперт сортировки
      align: 'center',            // выравнивание
  }

Для колонки pctChange я указал ширину и выравнивание, заодно запретил по ней сортировку

2.5

            ,{
                text: 'Last Modified',
                xtype: 'datecolumn',
                format: «m-d-Y»,
                dataIndex: 'lastmod'}
            ];

для колонки lastmod я указал формат вывода даты из YYYY-MM-DD в привычный вид ДД-ММ-ГГГГ
Здесь тоже столкнулся с тем, что d ExtJS 4 без указания xtype форматирование не отрабатывалось.

Итого получилось:

 var col =  [
            {   text: 'Company',       // заголовок колонки
                dataIndex: 'company',  // индекс поля из хранилища (fields)
                width:200,
                renderer: function(val){    // кастомно отформатировали
                      return '<a href=«http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27»>'+val+'</a>';}
            },{ text: 'Price',
                dataIndex: 'price',
                format:'0.000',             //
                xtype: 'numbercolumn',      //

            },{ text: 'Change',
                dataIndex: 'change',
                visible:false               // эту колонку просто спрятали
            },{ text: '% Change',
                dataIndex: 'pctChange',
                width: 165, // ширина колонки
                sortable: false,            // заперт сортировки
                align: 'center',            // выравнивание
            },{
                text: 'Last Modified',
                xtype: 'datecolumn',
                format: «m-d-Y»,
                dataIndex: 'lastmod'}
            ];

Код формирования окна с табличкой я опускаю. Он полностью идентичен тому что было в предыдущем примере.

Показать красивую табличку

Далее

1. GridPanel - таблички. Часть 2 Ajax
2. GridPanel - таблички. Часть 3 Редактирование полей
3. GridPanel - таблички. Часть 3 Редактирование полей (продолжение)
4. Form. Часть 1 - простые компооненты