add custom background color to individual grid row

[scheid]

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.

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:

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

[Zdeno]

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

.your-selected-cls .x-grid-cell {
    background-color: red !important;
}

add viewConfig to your grid and select event because you need refresh grid view

viewConfig: {
   selectedItemCls: 'red'
},
listeners: {
    select: function() {
        this.getView().refresh();
    }
}

Live example: http://jsfiddle.net/zsJdP/1/

[scottmartin]

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

Scott.

[scheid]

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.

[mandardadpe]

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