четверг, 9 июня 2011 г.

ExtJS 3 grid colspan или группировка колонок



Задача: необходимо объединить несколько колонок таблицы grid. В чистом HTML для этого существует атрибут colspan, но как реализовать это в элементах ExtJS?
В данной статье рассматривается третья версия ExtJS.

Решение.

Необходимо воспользоваться плагином ColumnHeaderGroup, пример использования которого можно посмотреть здесь.

Итак, для осуществления группировки колонок, необходимо:

  1. подключить js файл плагина (ColumnHeaderGroup.js)
  2. в коде Ext.onReady() описать заголовок таблицы следующим образом:

    // объявляем массив для хранения первой строки заголовка
    var row1 = [];
    // заполняем его
    row1.push({
      header: ''
    });
    row1.push({
      header: 'Ставка, руб./1 GT',
      colspan: '3',   // да-да, это аналог того самого colspan
      align: 'center' // выравнивание текста в ячейке
    });
  3. создать заголовок таблицы, используя плагин:

    groupedRows = new Ext.ux.grid.ColumnHeaderGroup({
      rows: [ row1 ]
    });

    В случае, если таких строк с объединенными колонками будет несколько - просто перечислите их черех запятую в массиве rows:

    groupedRows = new Ext.ux.grid.ColumnHeaderGroup({
      rows: [ row1, row2, row3 ]
    });


  4. подключить инициализированный плагин к таблице grid:

    grid = new Ext.grid.GridPanel({                
      xtype: 'grid',
      store: companiesStore,
      plugins: [ groupedRows ],
      border: false, frame: false,
      columns: columnModel
    });

Таким образом, заголовок таблицы делится на 2 типа строк - самая нижняя строка, описываемая в параметре columns модели GridPanel согласно всем стандартным правилам описания колонок таблицы grid, и все остальные строки, располагающиеся выше и объединяющие колонки при помощи плагина. Закомментируйте строку plugins: [ groupedRows ] и в заголовке останется только одна строка, нижняя, все верхние строки должны описываться как показано выше при инициализации плагина.

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

Комментариев нет:

Отправить комментарий