Change ExtJS column CSS after rendering it

Question

I have an ExtJS panel with several columns, some of which are hidden.

I want to be able to change the CSS of these columns depending on whether the column is set to hidden or not, is this possible?

Answer 1

First of all, there is no such thing as a column in terms of the DOM. There are a bunch of cells ( div and td actualy) that have the same class name:

  -------------------------------------------------- -----------------
 |  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 do something like:

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

you add the class to div#gridcolumn-1019 , but not to all other cells in the column.

So, in order to add a class to all cells of a column while hiding the columns, you should do something like this:

 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: changed invalid cells[i].addCls('myCls'); to fix Ext.fly(cells[i]).addCls('myCls');

Answer 2

I have never done this before, but try this:

Use hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden ) column model event. Get the column using this.getColumnById(this.getColumnId(columnIndex)) , and then access the renderer property of the column. In particular, check the css config option << 24> for docs .