View Full Version : How to set background color for grid row

30 Sep 2013, 5:46 AM

I have a grid with multiple rows.
I want to set different background color for each row.(background color for each row is based on the user selection).
So how i will set different background color dynamically. if i will set based on css for each row. then when user will change the color then how i update my css dynamically.

Please help, how i can achieve this?

Thanks in advance.

30 Sep 2013, 6:32 AM
I dont know if this is the best way to solve this but you can create a css class for each color (considering that you have a limited number of colors) and then use addRowCls and removeRowCls to add and remove a css class to the row.

30 Sep 2013, 7:16 AM
Hi Farish,

Thanks for your quick reply.

I am aware of this but my problem is, user can select any color from color picker.

30 Sep 2013, 10:36 AM
You may want to use util.CSS (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.util.CSS) to alter stylesheets at runtime. If you don't want to mess with custom css classes, you may want to override cellTpl (http://docs.sencha.com/extjs/4.2.1/source/Table3.html#Ext-view-Table-property-cellTpl) to output some style="background-color:..."

1 Oct 2013, 6:26 AM

Thanks for your reply.

If possible can you please provide a working example.

Thanks in advance.

1 Oct 2013, 10:31 PM
Example for which approach?

2 Oct 2013, 11:18 AM
I have a similar need that the user may want to configure a different color on the row depending on data retrieved. Is there a way to do it dynamically without set the row color without having to limit the user on the number of colors?

Can the cls be created dynamically?

For example, in the viewConfig, can I do something like this?

getRowClass: function (record, rowIndex, rowParams, store) {
var cls = 'background-color: ' + record.get('color') + ';'
return cls;

2 Oct 2013, 9:34 PM

2 Oct 2013, 10:06 PM
Hi ettavolt,

Thanks for you reply.

I have done using 'util.CSS' approach.

Something like this..

var newCssFile = Ext.util.CSS.createStyleSheet('.color-base .x-grid-cell { background-color: Red; }', 1);

for(var i = 0; i < record.length; i++)
var selector = '.color-' + record.ColorName+ ' .x-grid-cell';
var newCss = 'background-color: ' + record.ColorCode + ';';

Ext.util.CSS.createRule(newCssFile, selector, newCss);

In the grid viewConfig, I did something like this

getRowClass: function (record, rowIndex, rowParams, store) {
var cls = 'color-' + record.get('ColorName');
return cls;

Thanks for providing example also.

8 Oct 2013, 7:59 PM
Hi ettavolt,

Thank you for the example, but is there a way to do in extjs 4.1.3?


10 Oct 2013, 12:58 AM
For 4.1 override 'Ext.grid.header.Container#prepareData' method. Preferably on instance level:

new Ext.grid.Panel({
prepareData:function(data, rowIndex, record) {
var me = this,
obj = this.self.prototype.prepareData.apply(this, arguments),
headers = me.gridDataColumns || me.getGridColumns(),
headersLn = headers.length,
colIdx = 0,
store = panel.store;
for (; colIdx < headersLn; colIdx++) {
header = headers[colIdx];
headerId = header.id;
obj[headerId+'-style'] =obj[headerId+'-style'] + ' color:' + data.color + ';';
return obj;
items:[/*Columns go here*/]