Ext.onReady(function() {
var continentGroupRow= [
{header: 'China', colspan: 1, align: 'center'},
{header: 'Japan', colspan: 1, align: 'center'},
{header: 'Ameria', colspan: 1,align: 'center'},
{header: 'Franch', colspan: 4, align: 'center'},
{header: 'Korea', colspan: 1,align: 'center'},
{header: 'Germany', colspan: 1, align: 'center'}
];
var cityGroupRow = [
{},
{},
{},
{header: 'beijing', colspan: 1, align: 'center'},
{header: 'hunan', colspan: 3, align: 'center'},
{},
{}
];
var group = newExt.ux.grid.ColumnHeaderGroup({
rows:[continentGroupRow, cityGroupRow]
});
var fields =
[
{type: 'int', name: 'BeijingProductX'},
{type: 'int', name: 'BeijingProductY'},
{type: 'int', name: 'TokyoProductX'},
{type: 'int', name: 'TokyoProductY'},
{type: 'int', name: 'BerlinProductX'},
{type: 'int', name: 'BerlinProductY'},
{type: 'int', name: 'LondonProductX'},
{type: 'int', name: 'LondonProductY'},
{type: 'int', name: 'ParisProductX'}
]
var columns=
[
{dataIndex: 'BeijingProductX', header: ''},
{dataIndex: 'BeijingProductY', header: ''},
{dataIndex: 'TokyoProductX', header: ''},
{dataIndex: 'TokyoProductY', header: ''},
{dataIndex: 'BerlinProductX', header: 'shangcha'},
{dataIndex: 'BerlinProductY', header: 'yueyang'},
{dataIndex: 'LondonProductX', header: 'hengyang'},
{dataIndex: 'LondonProductY', header: ''},
{dataIndex: 'ParisProductX', header: ''}
]
var grid = newExt.grid.GridPanel({
renderTo: 'column-group-grid',
title:'Sales By Location',
width:1000,
height:400,
store:new Ext.data.ArrayStore({
fields: fields
}),
columns: columns,
viewConfig: {
forceFit: true
},
plugins: group
});
});
这是在extjs的实例（..\examples\grid\ColumnHeaderGroup.js）基础上进行修改的,我在实现过程中遇到无法跨行的问题，后来发现是html文件中引用的样式导致的，把html里的<link rel="stylesheet" type="text/css" href="../ux/css/ColumnHeaderGroup.css" />去掉就OK了，如果没有效果可以看一下引用的其他css文件里的样式是否包含： background: url(../../../resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;，如果包含了就去掉。
去掉样式之后的效果：
