渲染后更改ExtJS列的CSS

Question

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

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

Answer 1

首先，从DOM的角度来看，没有列这样的东西。有一堆具有相同className的单元格（div和td实际上）：

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

Answer 2

我以前从未这样做，但试试这个：

使用columnmodel的hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden )事件。使用this.getColumnById(this.getColumnId(columnIndex))获取列，然后访问该列的renderer属性。具体来说，请检查docs中css的{​​{1}}配置选项。