1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
    Answers
    1
    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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    689
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

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

      1  

    Default


    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?

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    689
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

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

    Scott.

  6. #5
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Answers
    1
    Csegota is on a distinguished road

      0  

    Default


    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.