在呈現ExtJS列後，更改它的CSS

Question

我有一個ExtJS Panel，其中有些列是隱藏的。

我希望能夠改變這些列的CSS取決於列是否設置爲隱藏或不是這是可能的嗎？

Answer 1

首先，從DOM的角度來看，沒有像列那樣的東西。有一羣細胞（div S和td小號actualy）具有相同的className：

 
------------------------------------------------------------------- 
| div#gridcolumn-1018   | div#gridcolumn-1019   | 
|-----------------------------------------------------------------| 
| td.x-grid-cell-gridcolumn-1018 | td.x-grid-cell-gridcolumn-1019 | 
| td.x-grid-cell-gridcolumn-1018 | td.x-grid-cell-gridcolumn-1019 | 
| td.x-grid-cell-gridcolumn-1018 | td.x-grid-cell-gridcolumn-1019 | 
|   ...     |   ...     | 
------------------------------------------------------------------- 

所以，當你正在做的事情，如：

grid.columns[1].addCls('myCls'); 

要添加類div#gridcolumn-1019但不是所有其他列的單元格。

所以要加類在列接一列的所有單元格躲在你必須做這樣的事情：

grid.column[1].on('hide', function(column){ 
    var id = column.getId(); // gridcolumn-1019 
    var cells = Ext.DomQuery.select('.x-grid-cell-'+id); 
    column.addCls('myCls'); 
    for (var i = 0; i < cells.length; i++) 
    Ext.fly(cells[i]).addCls('myCls'); 
} 

UPDATE：改變不正確的cells[i].addCls('myCls');糾正Ext.fly(cells[i]).addCls('myCls');

Answer 2

我從來沒有這樣做過，但嘗試了這一點：在columnmodel的

使用hiddenchange : (ColumnModel this, Number columnIndex, Boolean hidden)事件。使用this.getColumnById(this.getColumnId(columnIndex))獲取列，然後訪問該列的renderer屬性。具體檢查docs中的column的css配置選項。