1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    59
    Vote Rating
    1
    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
    358
    Vote Rating
    15
    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
    8,637
    Vote Rating
    400
    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
    59
    Vote Rating
    1
    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.

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