Custom grid renderer vs. selection

[effad]

I have written a custom grid renderer which sets the background of the cell. However, if the row is selected I want the background of the cell to be rendered in "selection color".

One can reproduce the situation by adapting the array-grid.js example:


// example of custom renderer function
function change(val, metadata){
if(val > 0){
metadata.attr = 'style="background:green"';
}else if(val < 0){
metadata.attr = 'style="background:red"';
}
return val;
}

// example of custom renderer function
function pctChange(val, metadata){
if(val > 0){
metadata.attr = 'style="background:green"';
}else if(val < 0){
metadata.attr = 'style="background:red"';
}
return val + "%";
}


The attachment illustrates the problem.


Has anyone a good idea how to achieve this?

[Animal]

Can't. Inline styles always take precedence. Use a class instead of inline style.

[effad]

I've tried something like


metadata.css = 'correctorgreen';


with a .css - file:


.correctorgreen {
background:#c8ffc8;
}


but that has the same effect: The cells will always be green (or red).

[Animal]

So now you have to make the rule which applies the "selected" style override that.

[effad]

So it boils down to some CSS magic :-).
I've adapted the .css to:


div.x-grid3-row-selected td.correctorgreen { background-color: #dfe8f6 !important; }
td.correctorgreen {background: #c8ffc8;}

i.e. if the td with "my" green is after a selected row it will be the usual background color.

A little bit dirty (because it depends on the actual rendering structure of the grid, it duplicates some stuff from the ext CSS), but it works ;-).

Thanks for hinting me into the right direction.