ExtJS5 - 实现多表头Grid

最新推荐文章于 2024-08-05 14:43:53 发布

般若Neo

最新推荐文章于 2024-08-05 14:43:53 发布

阅读量2.8k

点赞数 2

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

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

版权

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

摘要由CSDN通过智能技术生成

之前写过一篇文章介绍在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