[Ext JS]5.1.1 分组标题的表格（Grouped Header Grid）与使用技巧

最新推荐文章于 2023-04-12 22:52:37 发布

oscar999

最新推荐文章于 2023-04-12 22:52:37 发布

阅读量553

点赞数

分类专栏： Ext JS开发大全文章标签： Ext JS 分组标题 Grid

本文链接：https://blog.youkuaiyun.com/oscar999/article/details/124159812

版权

Ext JS开发大全专栏收录该内容

189 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客介绍了如何在Ext JS 5.1.1中创建分组标题的表格，包括两级分组的实现方法、禁用父级标题菜单的配置以及锁定列的展示。通过示例代码展示了分组标题栏的定义，并提供了在线演示链接供读者体验。

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

分组标题的表格，也就是表格的标题行不仅仅是一行，可能是两行或者是多行，而且上下行之间有层级关系。
以两层的分组标题栏为例，显示的效果如下：

在这里插入图片描述

实现方式

分组的标题栏的定义很简单，就是在columns 下嵌套定义columns ，dataIndex在最后一级标题定义。完整的定义如下代码所示：

           Ext.create('Ext.grid.Panel',{
				renderTo:'div1',
				store: mystore,
				columns:[
				{
					text:'',
					dataIndex:'power'
				},
				{
					text:'魏国',
					columns: [{
						text:'许昌',
						dataIndex:'xc'
					},{
						text:'洛阳',
						dataIndex:'ly'
					}]
				},{
					text:'蜀国',
					columns: [{
						text:'成都',