ExtJS 2.2.1 實現雙表頭動態列
阿新 • • 發佈:2019-02-20
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 實現雙表頭動態列