Row column selected extjs

Question

I need to provide a specific css for a column in a extjs grid. I define this renderer function:

render_alarm_color: function (value, metadata, record, rowIndex, colIndex, store){
        metadata.css = 'alarm-'+record.data.alarm;
        return value;
}

The css rule that are associated to that column is for example:

.alarm-0 {color:#FFFFFF; background:#FF3D4A !important;}
.alarm-1 {background:#67FF59 !important;}    

The problem that i have is when i select a row because the background color of the selected row override the previous color. I can define a background color specific for the column?

Any kind of help is helpful.

Answer 1

You should be able to just change these lines:

.alarm-0 {color:#FFFFFF; background:#FF3D4A !important;}
.alarm-1 {background:#67FF59 !important;}  

To

.alarm-0, .x-grid-row-selected > .alarm-0 {color:#FFFFFF; background:#FF3D4A !important;}
.alarm-1, .x-grid-row-selected > .alarm-1 {background:#67FF59 !important;}  

That should override the x-grid-row-selected class color. Here is a fiddle demo