1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default add custom background color to individual grid row

    add custom background color to individual grid row


    Hi all,

    I'm trying to add a custom background color to an individual row of an Ext grid. I can get the font color to change, so I know my custom css class is visible, but the background color for some reason doesn't change.

    Here is how I'm trying to do it.

    Code:
    var selNodes =  myExtGrid.getView().getSelectedNodes();
    var r = Ext.get(selNodes[0]);
    
    
    r.removeCls("x-grid-row-over");
    r.removeCls("x-grid-row-selected");
    r.removeCls("x-grid-row-focused");
    
    
    r.addCls("x-grid-row-emphasized");

    my x-grid-row-emphasized class is like this:

    Code:
    
    .x-grid-row-emphasized {
    	background-image: none !important;
    	background: red !important;
    	color: white !important;
    	
    }

    Any ideas on why this is not working? Thanks for your help.

  2. #2
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    389
    Vote Rating
    17
    Zdeno will become famous soon enough

      2  

    Default


    Because you cant set color on row, you have to set up color for cell..

    Code:
    .your-selected-cls .x-grid-cell {
        background-color: red !important;
    }
    add viewConfig to your grid and select event because you need refresh grid view

    Code:
    viewConfig: {
       selectedItemCls: 'red'
    },
    listeners: {
        select: function() {
            this.getView().refresh();
        }
    }
    Live example: http://jsfiddle.net/zsJdP/1/

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,007
    Vote Rating
    458
    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

      3  

    Default


    Also .. here is a great article on grid styles:
    http://skirtlesden.com/articles/styl...tjs-grid-cells

    Scott.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    spot on, guys, thanks much! @zdeno, that was definitely the problem. Applying the css to the td elements works like a charm; I forgot about tr's not having bg colors.

    @scott, excellent resource for grid css; I'm definitely going to use that.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    48
    Vote Rating
    0
    mandardadpe is on a distinguished road

      0  

    Default


    This is default grid CSS...but how to apply css class to selected row using ,method 'addCls' ?????

  6. #6
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    alonewillsaint@gmail.com is on a distinguished road

      0  

    Default Add Background color dynammically

    Add Background color dynammically


    your Css :
    .red .x-grid-cell
    {
    background-color: #FFFF66;
    color: Green;
    }

    if remove .x-grid-cell the background color will not be affected just color will be affected

    and in your code :
    yourGridviw.getView().selectedItemCls = 'red';
    remember in java script u can use all extjs congfig option as properties like above.