ExtJS5 - 实现多表头Grid

最新推荐文章于 2019-01-10 11:01:15 发布

般若Neo

最新推荐文章于 2019-01-10 11:01:15 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # ExtJS 文章标签：多表头Grid extjs extjs5

本文链接：https://blog.csdn.net/hwhsong/article/details/50601196

本文介绍了在ExtJS5中如何通过嵌套columns实现多表头Grid，相较于Ext3的ColumnHeaderGroup插件，这种方式更加简洁。示例代码展示了创建三层表头的方法，适用于需要构建复杂表头布局的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一篇文章介绍在Ext3系列中，使用ColumnHeaderGroup插件来实现多表头Grid，其过程比较繁琐，而且有各种坑，比如不同层级的表头之间会错位、在checkboxmodel选择模式下表头会有多余的复选框等。

其实从Ext4开始，便舍弃了之前的实现方式，而使用columns嵌套的方式实现，这里用Ext5版本实现一个Demo示例。

代码如下：

Ext.onReady(function() {
	var userStore = Ext.create("Ext.data.Store", {
		fields: ["account", "name", "sex", "age", "role"],
		data: [
			["zhanglei", "张磊", "男", "30", "管理员"],
			["liming", "李明", "男", "27", "主编"],
			["liuying", "刘颖", "女", "22", "内容编辑"]
		]
	});
	
	Ext.create("Ext.grid.Panel", {
		title: "多表头Grid",
		margin: 10,
		width: 600,
		height: 400,
		border: true,
		selModel: {
			type: "checkboxmodel"
		},
		store: userStore,
		columns: [{
			text: "账号",
			dataIndex: "account",
			flex: 1,
			align: "center"
		}, {
			text: "基本信息",
			flex: 3,
			align: "center",
			columns: [{
				text: "姓名",
				dataIndex: "name",
				align: "center"
			}, {
				text: "性别",
				dataIndex: