我记得我花了很多时间试图理解 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网格的商店设置。
快乐编码！