extjs - 渲染后更改 ExtJS 列的 CSS

Question

我有一个 ExtJS 面板，其中有许多列是隐藏的。

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

Answer 1

首先，从 DOM 的角度来看，没有列这样的东西。有一堆单元格( div s 和 td s 实际上)具有相同的类名:

-------------------------------------------------------------------| 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 ||         ...                    |         ...                    |-------------------------------------------------------------------

So when you are doing thing like:

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

您正在向 div#gridcolumn-1019 添加类(class)但不是所有其他列的单元格。

因此，要将类添加到列隐藏列的所有单元格中，您必须执行以下操作:

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