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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,625
    Answers
    612
    Vote Rating
    398
    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
    Answers
    1
    Vote Rating
    2
    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
    8,625
    Answers
    612
    Vote Rating
    398
    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
    26
    Answers
    1
    Vote Rating
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar