getRowClass background in a grid view

[rfox]

Im trying to change the background color and font color of rows in a gridview based on a record field im using this:


viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
//alert(record.get('rowcolor'));
return record.get('rowcolor');
}
},

an example value being red and the css rule being:


.red {
background-color: #FF0000 !important;
color: #FFFFFF;
}

this works in regards to the font color it turns to white. However the background-color rule is ignored. Firebug lists the background-color as transparent.

so i looked at its other classes one being x-grid-row deleteing this class changes the background color to red.

to solve this i tried:


.x-grid-row {
background-color:#FF0000;
}

to just completely overule it to red in order to get something other than transparent

despite this the rows are still transparently colored.

what am i missing here?

Thanks

[mitchellsimoens]

Keep inspecting the DOM... see what classes are placing the background

[rfox]

i found out the inner td and div were set to white rather than transparent.

i have applied these rules:


td div {
background-color: transparent;

}
td {
background-color: transparent !important;
}
which are working better. ill adapt them to be more specific later