PDA

View Full Version : [CLOSED] GridPanel Cell Color Renderer



elisa
Nov 04, 2013, 4:41 PM
I have a renderer defined for select columns in a GridPanel as follows:


var linkRenderer = function (value, meta, record, index) {
if (value != 0) {
return Ext.String.format("<a class='company-link' href='#' onclick='linkClick({1},{2});'>{0}</a>", value, index, meta.columnIndex);
}
else {
return value;
}
};


I'm trying to modify it to also change the cell background color like this:


var linkRenderer = function (value, meta, record, index) {
if (value != 0) {
metadata.tdCls = "tdRed";
return Ext.String.format("<a class='company-link' href='#' onclick='linkClick({1},{2});'>{0}</a>", value, index, meta.columnIndex);
}
else {
metadata.tdCls = "tdGreen";
return value;
}
};


This is the CSS:


.x-grid-row .tdRed {
background-color: #FF0000;
}
.x-grid-row .tdAmber {
background-color: #FF9933;
}
.x-grid-row .tdGreen {
background-color: #00CC00;
}
.x-grid-custom .company-link
{
color: #0000FF;
}


But it doesn't work; the cell is just blank. What am I missing?

elisa
Nov 04, 2013, 5:39 PM
Never mind, I'm an idiot.



var linkRenderer = function (value, meta, record, index) {
if (value != 0) {
meta.tdCls = "tdRed";
return Ext.String.format("<a class='company-link' href='#' onclick='linkClick({1},{2});'>{0}</a>", value, index, meta.columnIndex);
}
else {
meta.tdCls = "tdGreen";
return value;
}
};


I was using the variable "metadata" instead of "meta" because I copied from a different example.

Daniil
Nov 05, 2013, 3:10 AM
Hi,

I recommend to use ScriptMode="Development". In that case you would see an error message in a browser's console and fix the problem even more quickly.