View Full Version : Change mouseover color on modified css rows

9 Oct 2012, 1:12 PM

I have a grid panel where I would like the color of each row to change when it has been updated by the user. Thanks to a page written by Skirtle (thanks!), I've figured out how to do this

In my grid

viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
if(!record) return '';

if(record.dirty == true) return 'bg-row-edited';

CSS file:

.bg-row-edited .x-grid-cell {
background-color:#fffec7 !important;

However, I'd also like to have the color of the row be something else if the mouse is over that row. I only want the dirty records to have this new mouseover color, not the other records.

I have tried the following in the CSS file but it has not worked:

.bg-row-edited .x-grid-row-over .x-grid-cell {
background-color: #be6;
border-bottom-color: #999;
border-bottom-style: dashed;
border-top-color: #999;
border-top-style: dashed;

Any suggestions on how this can be accomplished?

9 Oct 2012, 2:34 PM
Please try the following:


10 Oct 2012, 12:09 PM
Yep, this definitely works thanks Scott. The !important keyword forced the browser to use those css properties.

Also, a space between .bg-row-edited and .x-grid-row-over caused the css property to not get picked up. I'm not a css expert here but it seems that ExtJS is treating bg-row-edited similar to a tag where you would have tag.className in your css file (ex: p.boldedParagraphs { attributes making the paragraph bold;} Is this why the space mattered?

10 Oct 2012, 12:57 PM
You want the same element, not a descending class of the element

x-grid-row bg-row-edited x-grid-row-over


4 Oct 2013, 1:41 PM
I would love to understand why it was required for there to be no space between the name of this CSS cls and the .x-grid-row-over, this is the first time in my CSS I've had to do that to make it work.