ExtJS5.1.2实现双表头动态列

需求：用ExtJS5.1.2制作以下Grid效果(其中列3是动态的)：
ExtJS3的实现方式和5不一样。

创新互联专注于古丈网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供古丈营销型网站建设，古丈网站制作、古丈网页设计、古丈网站官网定制、重庆小程序开发公司服务，打造古丈网络公司原创品牌,更为您提供古丈网站排名全网营销落地服务。

基本代码：
为了实现双表头，需要嵌套columns。

{
    id : 'grid1',
    xtype : 'grid'
    columns : [{
            header : '列1',
            xtype : 'gridcolumn'
        }, {
            header : '列2',
            xtype : 'gridcolumn'
        }, {
            header : '列3',
            xtype : 'gridcolumn',
            columns : [{
                    header : '列3-1',
                    xtype : 'gridcolumn'
                } , {
                    header : '列3-2',
                    xtype : 'gridcolumn'
                }, {
                    header : '列3-3',
                    xtype : 'gridcolumn'
                }]
        }]
}

解决思路：

1. 先显示所有动态列，然后隐藏。
   --> 失败，使用Ext.getCmp(id).hide()或者show()会导致页面无响应。这个方法在单表头的时候没有问题。

2. 先全部按单列(不嵌套columns)显示，然后使用hide()隐藏不需要的列，再合并第一行表头。
   --> 目前没有找到实现方法。

3. 动态追加列3。
   --> 使用columnManager.secondHeaderCt.insert(指定位置, column数组)或者add(column数组)。
   代码样本：

   var columnList = [];
   columns.push({
       header : '列3-1',
       xtype : 'gridcolumn'
   }， {
       header : '列3-2',
       xtype : 'gridcolumn'
   }， {
       header : '列3-3',
       xtype : 'gridcolumn'
   });
   var grid = Ext.getCmp('grid1');
   grid.columnManager.secondHeaderCt.add(
       xtype : 'gridcolumn',
       header : '列3',
       columns : columnList
   );

ExtJS并不建议使用Ext.grid.ColumnManager，官方API也找不到grid.columnManager.secondHeaderCt，可以通过Chrome/F12/Console/输入“Ext.getCmp('grid').columnManager”找到secondHeaderCt。

网页题目：ExtJS5.1.2实现双表头动态列
文章链接：https://www.cdcxhl.com/article30/peocpo.html

成都网站建设公司_创新互联，为您提供营销型网站建设、标签优化、品牌网站设计、网站营销、自适应网站、定制网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联