PDA

View Full Version : Issues Changing a Cell's Foreground Color in a Grid



mike000
7 Aug 2007, 11:31 AM
I'm trying to change the foreground color of some cells in an EditorGrid that I'm working on. I didn't think this would be a big deal because I already have code working for changing the background color (using custom cell renderers). But I cannot get anything to happen when I attempt to add change the cell's "color" field rather than its "background-color" field (which does work).

Working code for changing background colors:


cellRendererWithColors : function(data,cell,record,rowIndex,columnIndex,store) {
var index=0;
index = cell.css.indexOf(" cellColorLarge");
if (index != -1) {
cell.css = cell.css.substring(0, index);
}

index = cell.css.indexOf(" cellColorMiddle");
if (index != -1) {
cell.css = cell.css.substring(0, index);
}

index = cell.css.indexOf(" cellColorSmall");
if (index != -1) {
cell.css = cell.css.substring(0, index);
}

if(difference >= 1) {
cell.css += " cellColorLarge";
}
else if(difference >= 0.5) {
cell.css += " cellColorMiddle";
}
else if(difference >= 0.1) {
cell.css += " cellColorSmall";
}

}

and the css for that is:


.cellColorLarge{
background-color:#FF9999;
}
.cellColorMiddle{
background-color:#FFFF99;
}
.cellColorSmall{
background-color:#CCFF99;
}


But if I change the css to:


.cellColorLarge{
color:#FF9999;
}
.cellColorMiddle{
color:#FFFF99;
}
.cellColorSmall{
color:#CCFF99;
}


The foreground color does not change like the background color did. Adding a !important tag does not make a difference. I'm pretty sure that I'm using the right css tag to do this, since x-grid-cell-selected (which makes the foreground color white for a selected cell) looks like this:



.x-grid-cell-selected {
background-color:#316AC5 !important;
color:white;
}

para
7 Aug 2007, 12:51 PM
I would load the page in FF, use FireBug to inspect the text and see what styles are being applied to it. See if there is an !important on another class somewhere. Make sure that your class is being applied, etc.