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

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.

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.


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.

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


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, '', ',', '', '', '', ''));
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?

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