PDA

View Full Version : ExtJS 4 - how to change grid row color but without CSS



Kazio
14 Jul 2015, 2:52 AM
I know how to use CSS class to change background color of grid element, e.g. rows.
But could you prompt me how to change grid row background color without using CSS?
I found the following procedure, but can't find what should I return.
I hope that's why it's not working:

viewConfig: {
getRowClass: function(record, index, rowParams, ds) {
rowParams.tstyle = 'width:' + this.getTotalWidth() + ';';
if (set_background) {
rowParams.tstyle += "background-color:" + bgColor + ';';
}
if (set_foreground) {
rowParams.tstyle += "color:" + fgColor + ';';
}
}
}

Be so kind as to advise.

slemmon
16 Jul 2015, 12:43 PM
It's possible to use a renderer, though for your situation I'd probably still recommend using getRowClass and using CSS.

qkl

Kazio
17 Jul 2015, 1:11 AM
Thanks for quick answer I try to use renrerer. But it isnít my idea itís just project requirement. I have to read information about events from db table (I mean: date, number, description and color in RGB hex code) and then display them as calendar in grid. Thatís why Iím looking for the way to color grid rows and cells without CSS mechanism. Normally I use CSS obviously.

Kazio
17 Jul 2015, 4:48 AM
Almost fine but look two rows are coloured by CSS and this "yellow" by renderer as you suggested. I can't find reason why 3 fields are blue or white

52859

Sorry, but step-by-step. In the last column I commented the following renderer


renderer: function (value, meta, record, rowIndex, colIndex, store, view) {
if (value < 2.0) meta.tdCls = 'RED_TEXT';
if (value != "")
return (Portal.Const.formatNumber(value, 2, '', ',', '', '', '', ''));
else
return (value);
}

and last column is also in proper colour now. And I found, I can repeat in this fields renderers with the same set "meta" as in grid renderer and color is ok. It mean I must repeat such a renderer 3 times. Better solution?

Kazio
24 Jul 2015, 1:29 AM
OK, sorry for delay but I found why. Just renderers on thsifields. Problem solved, thank you.