Я помню, как я тратил много времени, пытаясь понять код в примере Sencha, предоставленном для ColumnHeaderGroup.Я сделал 6-уровневый заголовок группы столбцов несколько дней назад, и это не так сложно.
Поместите все ваши заголовки столбцов в объект в качестве ключей объекта для следующих заголовков.Последователи последних заголовков будут свойствами столбцов:
var chstructure = {
'A1 header' : {
'A2Header' : {'A2Data' : {'A2Data' : {'dataIndex' : 'A2', 'width' : 100}}},
'A3Header' : {'A3Data' : {'A3Data' : {'dataIndex' : 'A3', 'width' : 100}}}
},
'B1 header' : {
'B2Header' : {'B2Data' : {'B2Data' : {'dataIndex' : 'B2', 'width' : 100}}},
'B3Header' : {'B3Data' : {'B3Data' : {'dataIndex' : 'B3', 'width' : 100}}}
}
};
Вам понадобятся несколько массивов для размещения заголовков: эти массивы будут строками в вашей группе заголовков столбцов.Вам также понадобится массив полей: он будет содержать поля для вашего магазина.Не забудьте инициализировать некоторые переменные colspan (я назову их len n ), которые будут вести подсчет colspan для каждого заголовка столбца (в этом примере 'A1 header' имеет 2 дочерних элемента и 'A2Header' имееттолько 1) и некоторые переменные ширины (wid n ) для ширины каждого заголовка.
var Row1contents = [], Row2contents = [], Row3contents = [], Row4contents = [];
var len1 = 0, len2 = 0, len3=0, wid1 = 0, wid2 = 0, wid3 = 0;
var fields = [];
Теперь вы можете, наконец, проанализировать chstructure, чтобы получить заголовки столбцов.Для этого используйте Ext.iterate:
Ext.iterate (chstructure, function(Row1, Row1structure){
Ext.iterate (Row1structure, function(Row2, Row2structure){
Ext.iterate (Row2structure, function(Row3, Row3structure){
Ext.iterate (Row3contents, function(Row4, Row4structure){
len1++;len2++;len3++;
wid1+=Row4structure['width'];
wid2+=Row4structure['width'];
wid3+=Row4structure['width'];
Row4contents.push({
dataIndex: Row4structure['dataIndex'],
header: Row4,
width: Row4structure['width']
});
fields.push({
type: 'int', // may be 'string'
name: Row4structure['dataIndex']
});
});
Row3contents.push({
header: Row3,
width: wid3,
colspan: len3
});
len3=wid3=0;
});
Row2contents.push({
header: Row2,
width: wid2,
colspan: len2
});
len2=wid2=0;
});
Row1contents.push({
header: Row1,
width: wid1,
colspan: len1
});
len1=wid1=0;
});
Просмотрите 4 массива в консоли и убедитесь, что они содержат все заданные вами данные.Последний шаг - настроить ширину сетки для плагина ColumnHeaderGroup.Используйте свойство
plugins: [new Ext.ux.grid.ColumnHeaderGroup({
rows: [Row1Group, Row2Group, Row3Group]
});
Установите columns : Row4contents для своей сетки и fields : fields для магазина вашей сетки.
Удачного кодирования!