码迷,mamicode.com
首页 > Web开发 > 详细

ExtJS 2.2.1 实现双表头动态列

时间:2019-02-20 11:27:10      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:gray   listener   etc   Nid   getc   隐藏   背景   ...   function   

  • 默认所有列(假设列3最大3列,动态显示),使用headerRowsEx中的rowspan实现双表头,第一层表头的width也必须要设置正确。
  • 使用"grid.getColumnModel().setHidden"即可实现列的隐藏,也不需要动态设置colspan。
  • {
        xtype : ‘filtergrid‘,
        id : ‘grid1‘,
        cm : new Ext.grid.ColumnModel({
            columns : [{
                header: ‘列1‘,
                id: ‘col1‘,
                dataIndex: ‘col1‘,
                width : 100
            }, {
                header: ‘列2‘,
                id: ‘col2‘,
                dataIndex: ‘col2‘,
                width : 100
            }, {
                header: ‘列3-1‘,
                id: ‘col31‘,
                dataIndex: ‘col31‘,
                width : 100
            }, {
                header: ‘列3-2‘,
                id: ‘col32‘,
                dataIndex: ‘col22‘,
                width : 100
            }, {
                header: ‘列3-3‘,
                id: ‘col33‘,
                dataIndex: ‘col33‘,
                width : 100
            }],
            headerRowsEx : [[{
                dataIndex : ‘col1‘,
                rowspan : 2
            }, {
                dataIndex : ‘col2‘,
                rowspan : 2 
            }, {
                id : ‘col3Header‘,
                header : ‘列3‘,
                colspan : 3,
                width : 300
            }], [{
                header : ‘列1‘
            }, {
                header : ‘列2‘
            }, {
                dataIndex : ‘col31‘,
                columnIdRef : [‘col3Header‘]
            }, {
                dataIndex : ‘col32‘,
                columnIdRef : [‘col3Header‘]
            }, {
                dataIndex : ‘col33‘,
                columnIdRef : [‘col3Header‘]
            }]]
        }),
        filters : new Ext.ux.GridFilters({
            filters : [{
                ......
            }, {
                ......
            }]
        }),
        store : ...,
        listeners : ...
    },
    
    initialize : function(param) {
        var grid = Ext.getCmp(‘grid1‘);
        var cm = grid.getColumnModel();
        cm.setHidden(cm.findColumnIndex(‘col33‘), true);
    
        //  查找列的Index
        //cm.findColumnIndex(‘col33‘);
        // 单元格背景色设置
        // grid.getView().getCell(i, j).style.backgroundColor = "gray";
    }

    ExtJS 2.2.1 实现双表头动态列

    标签:gray   listener   etc   Nid   getc   隐藏   背景   ...   function   

    原文地址:http://blog.51cto.com/13685327/2352191

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!