1. 程式人生 > >ExtJS 2.2.1 實現雙表頭動態列

ExtJS 2.2.1 實現雙表頭動態列

type var 實現 UNC 最大 set index ext.get round

  • 默認所有列(假設列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 實現雙表頭動態列