Изменить CSS столбца ExtJS после его рендеринга

Question

У меня есть панель ExtJS с несколькими столбцами, некоторые из которых скрыты.

Я хочу иметь возможность изменять CSS этих столбцов в зависимости от того, установлен ли столбец как скрытый или нет, возможно ли это?

Answer 1

Прежде всего, нет такой вещи, как столбец с точки зрения DOM.Есть несколько ячеек (div s и td s на самом деле), которые имеют одно и то же 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');
}

ОБНОВЛЕНИЕ: изменил неправильный cells[i].addCls('myCls'); на правильный Ext.fly(cells[i]).addCls('myCls');

Answer 2

Я никогда не делал этого раньше, но попробуйте:

Используйте hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden ) событие columnmodel.Получите столбец, используя this.getColumnById(this.getColumnId(columnIndex)), а затем получите доступ к свойству renderer столбца.В частности, проверьте css параметр конфигурации column из документов .