组合表头

 使用Extjs 组合表头必须引用extjs自带的表头分组包 在这里我提供了两个表头分组包，ColumnHeaderGroup.js和GroupHeaderPlugin.js。ColumnHeaderGroup.js是Extjs3.1中自带的，提供表头组合，但无法进行筛选；GroupHeaderPlugin.js是改进过的，可进行筛选。

接下来就是实际代码

var group1 = [{}, {
header : '分组1-1a',
colspan : 4,
align : 'center'
}, {}, {
header : '分组1-3',
colspan : 5,
align : 'center'
}];

// 如果使用的是ColumnHeaderGroup.js 这地方需要改一下
//	var group = new Ext.ux.grid.ColumnHeaderGroup({
//		rows : [group1]
//	});
var group = new Ext.ux.plugins.GroupHeaderGrid({
rows : [group1]
});

// 定义自动当前页行号
var rownum = new Ext.grid.RowNumberer({
header : 'NO',
width : 28
});
// 定义列模型
var cm = new Ext.grid.ColumnModel([rownum, {
header : '项目ID', // 列标题
dataIndex : 'xmid', // 数据索引:和Store模型对应
sortable : true
// 是否可排序
}, {
header : '项目名称',
dataIndex : 'xmmc',
sortable : true,
width : 200
}, {
header : '项目热键',
dataIndex : 'xmrj'
}, {
header : '规格',
dataIndex : 'gg'
}, {
dataIndex : 'dw',
align:'center',
fixed:true,
width : 60
}, {
header : '启用状态',
dataIndex : 'qybz',
// 演示render的用法(代码转换,该render由<G4Studio:ext.codeRender/>标签生成)
renderer : QYBZRender,
width : 60
}, {
header : '剂型',
dataIndex : 'jx',
width : 60
}, {
header : '产地',
dataIndex : 'cd',
width : 200
}, {
header : '医院编码',
dataIndex : 'yybm'
}, {
header : '更改时间',
dataIndex : 'ggsj'
}]);

/**
* 数据存储
*/
var store = new Ext.data.Store({
// 获取数据的方式
proxy : new Ext.data.HttpProxy({
url : 'gridDemo.do?reqCode=querySfxmDatas'
}),
// 数据读取器
reader : new Ext.data.JsonReader({
totalProperty : 'TOTALCOUNT', // 记录总数
root : 'ROOT' // Json中的列表数据根节点
}, [{
name : 'xmid' // Json中的属性Key值
}, {
name : 'sfdlbm'
}, {
name : 'xmmc'
}, {
name : 'xmrj'
}, {
name : 'gg'
}, {
name : 'dw'
}, {
name : 'qybz'
}, {
name : 'jx'
}, {
name : 'cd'
}, {
name : 'yybm'
}, {
name : 'ggsj'
}])
});

// 表格实例
var grid = new Ext.grid.GridPanel({
// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
title : '<span class="commoncss">表头分组</span>',
height : 500,
frame : true,
autoScroll : true,
region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
margins : '3 3 3 3',
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm, // 列模型
plugins : group,
viewConfig : {
// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
// forceFit : true
},
loadMask : {
msg : '正在加载表格数据,请稍等...'
}
});

 运行效果