渲染后更改ExtJS列的CSS

Question

我有一个包含许多列的ExtJS Panel,其中一些列是隐藏的.

我希望能够根据列是否设置为隐藏来更改这些列的CSS,这可能吗？

Answer 1

首先,从DOM的角度来看,没有列这样的东西.有一堆具有相同className 的单元格(divs和tds实际):

-------------------------------------------------------------------
| 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');
}

更新:更改错误cells[i].addCls('myCls');以更正Ext.fly(cells[i]).addCls('myCls');