Ext合并表头并不难,需要引入一个开源的扩展文件GroupHeaderPlugin.js和GroupHeaderPlugin.css
现在展示以前做过的一个小例子
?
?
var eventcolModel = new Ext.grid.ColumnModel({
columns:[
{
header : '编号',
dataIndex : 'id',
hidden:true,
editor : new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank : false
})
)
}, {
header : '小时',
dataIndex : 'startTimeHour',
align:'right',
width : 150,
editor : new Ext.grid.GridEditor(
startTimeHourCombo
),
renderer:function(value){//显示combo的text而不是显示value
return comboHourData[value][1];
}
},
{
header : '分钟',
dataIndex : 'startTimeMin',
align:'left',
width : 150,
editor : new Ext.grid.GridEditor(
startTimeMinCombo
),
renderer:function(value){//显示combo的text而不是显示value
return comboMinData[value][1];
}
},
{
header : '小时',
dataIndex : 'endTimeHour',
align:'right',
width : 150,
editor : new Ext.grid.GridEditor(
endTimeHourCombo
),
renderer:function(value){//显示combo的text而不是显示value
return comboHourData[value][1];
}
},
{
header : '分钟',
dataIndex : 'endTimeMin',
align:'left',
width : 150,
editor : new Ext.grid.GridEditor(
endTimeMinCombo
),
renderer:function(value){//显示combo的text而不是显示value
return comboMinData[value][1];
}
},
{
header : '亮度(%)',
dataIndex : 'brightness',
align:'center',
width : 300,
editor : new Ext.grid.GridEditor(
brightnessCombo
)/*,
renderer:function(value){//显示combo的text而不是显示value
return comboBrightnessData[value][1];
}*/
} ],//columns结束
rows: [[
{},
{header: '开始时间', colspan: 2, align: 'center'},
{header: '结束时间', colspan: 2, align: 'center'},
{}
]
]
});
var eventGrid = new Ext.grid.EditorGridPanel({
id:'eventGird',
title:'event',
region:'center',
//height:200,
split:true,
store: eventStore,
cm:eventcolModel,
bbar:eventTb,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
viewConfig:{
forceFit:true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
});
??