我记得我花了很多时间试图理解 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}}}
}
};
您需要一些数组来放置标题：这些数组将是列标题组中的行。您还需要一个 fields 数组：它将包含您商店的字段。不要忘记初始化一些 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。
编码愉快！