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