Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Answers
    1
    Vote Rating
    2
    infernoz is on a distinguished road

      0  

    Default Answered: Change mouseover color on modified css rows

    Answered: Change mouseover color on modified css rows


    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
    Code:
     viewConfig: {
                getRowClass: function(record, rowIndex, rowParams, store) {
                    if(!record) return '';
                    
                    if(record.dirty == true) return 'bg-row-edited';
                }
            }
    CSS file:

    Code:
    .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:

    Code:
    .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?

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

    Scott.