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 ] и в заголовке останется только одна строка, нижняя, все верхние строки должны описываться как показано выше при инициализации плагина.

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