View Full Version : Grid rows not changing color with 4.0.x

25 Oct 2011, 11:14 PM
Ext version tested:

Ext 4.0.7

Browser versions tested against:

Firefox 5 with firebug


When trying to change the row color of a gridrow using the overridden getRowClass function, the row color is not changed. I can see that the class was indeed injected into the tr entry ie. <tr class="x-grid-row grid_green">

Steps to reproduce the problem:

Using the getRowClass included below on a grid that returns a class, and the contained css entry

The result that was expected:

The color should have changed for all rows. Is it the CSS that is wrong? Is there a problem with the default CSS that is shipped in 4.0.7 that prevents it from being overridden?

The result that occurs instead:

No color changes were done on any of the rows. Additionally, I would like to know how to have slightly different colors for the "alt rows"

Test Case:

viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
// TODO this has no affect on the grid
return "grid_green";

and the CSS

.grid_green {
background-color:#008000 !important;


26 Oct 2011, 1:03 AM
You need to tweak your selector slightly. See:


26 Oct 2011, 4:04 PM

The following did the trick (and in that order!)

.grid_green .x-grid-cell {
background-color:#008000 ;


28 Oct 2011, 9:20 AM
Thanks for this, been a "bug" in my code for at least a month. :D