Change mouseover color on modified css rows

[infernoz]

Hello,

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?

[scottmartin]

Please try the following:
http://jsfiddle.net/DgEgB/

Scott.

[infernoz]

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?

[scottmartin]

You want the same element, not a descending class of the element

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

Scott.