宜宾网站建设公司

ExtJS5.1.2实现双表头动态列-创新互联

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

创新互联建站网站建设公司，提供网站建设、网站制作，网页设计，建网站，PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展；专业做搜索引擎喜爱的网站，是专业的做网站团队，希望更多企业前来合作!

基本代码：
为了实现双表头，需要嵌套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 实现双表头动态列

ExtJS5.1.2 实现双表头动态列

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：ExtJS5.1.2实现双表头动态列-创新互联
网站地址：http://ybzwz.com/article/ioesd.html

其他资讯