View Full Version : Hot to change grid row background-color?

24 Jan 2012, 7:27 AM

I couldn't find a solution for making grid rows background-color that is fetched from the store.

I have tied:

viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){

rowParams.tstyle += "background-color:" + record.data.color + ';'; //deprecated

this.getRow(rowIndex).style.backgroundColor = 'Yellow';

Ext.fly(this.getRow(rowIndex).style.backgroundColor = 'Yellow');

return Ext.String.format('" style="background-color:{0} !important;', record.data.color);
//this makes <tr class="x-grid-row" style="background-color:#B0E0E8 !important;">, but it not work i dont know why


I even tried:

features: [
Ext.create('Ext.grid.feature.RowBody', {
getAdditionalData: function(data, rowIndex, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan

But i dont know how to use it.

renderer: function (val, metadata, record, rowIndex){
metadata.style = 'background-color:'+record.data.color+';';
metadata.tdAttr = 'style="background: '+record.data.color +'"';
return '';

Work fine but it is only for one columns. Shoud i add the same color renderer to each column?
To fix the row background color.

24 Jan 2012, 8:33 AM
In this case I was able to do a direct inline style for both color and indent. Line 6 is one color (different from the main style) and children on the next three rows are both colored and indented. :

.rowaccent1 {background-color: #8fbc8f; }
.rowaccent2 {background-color: #c4f7c5; padding-left: 20px;}

testGridRender = function() {

Ext.override( Ext.grid.GridView, {
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 6){
return 'rowaccent1';
} else if (rowIndex >= 7 && rowIndex <= 9) {
return 'rowaccent2';
return '';

24 Jan 2012, 8:37 AM
Overriding is bad mojo for apps unless you want to change behavior for entire apps.

24 Jan 2012, 8:38 AM
getRowClass should return a string that represents a CSS style name, not a style atribute.

25 Jan 2012, 2:32 AM

Jay thank you for your book it realy very very helpfull. I started learn reading it. Many thanks for the realy good book.

Ok thank for the answers. But what i am actually need it is to change background color of the row dependent on the store data, which consist color value. Example picture atached.
Using code :

return Ext.String.format('" style="background-color:{0}', record.data.color);

I was tring to cheat. I recived a good html as i need:

<tr class="x-grid-row" style="background-color: #B0E0E8">

But fortunatly it not work. I want ask you in what direction should i dig?

P.S. Glad to see here Jay Garcia. I love your screen casts.

25 Jan 2012, 5:22 AM
So it should be something like this -->>http://jsfiddle.net/serju/sFjGA/10/
I can't figure it out why each even row it's white.. something with the css!!

Now it works! http://jsfiddle.net/serju/sFjGA/10/
Good luck dear neighbour ;)

viewConfig: {
getRowClass: function(record) {
return record.get('color');

25 Jan 2012, 6:05 AM
Thank you dear chramer!
First of all, it is not work on that site. (dont know why). But it is seems to work, becouse you defined all colors in css. I see your point of view. I have found this solution too, but is not exacle what I need. I will received color like this '#FF0000' in store. Thats why using css is not posible (I think so). And then user will have the ability to change row color on the fle using color picker. Color picker here http://www.sencha.com/forum/showthread.php?134576-Ext.ux.AdvancedColorPicker i have found (fix some minor errors) and it works good.


http://jsfiddle.net is it your site? It's cool site!
P.S. Thank you for your helping me, my dear neighbour ;) But no luck :(