PDA

View Full Version : Chaning the Background color of cells of 2 Columns of the Same row



prijithkr
20 Jun 2012, 5:16 AM
When we added the color to the Cell in the Grid using getRowClass, we are actually applying the class to the whole row, so its not possible to put two different colors for 2 cells in the same row, as The classes will overlap and only the latest will get applied,

Any suggestion?

My Code:

[ { header: 'Q3-2011', id:'col1', dataIndex: 'q3',flex:1, tdCls:'colorColumnQ3'},
{ header: 'Q4-2011', id:'col2', dataIndex: 'q4',flex:1, tdCls:'colorColumnQ4'}],

viewConfig: {
getRowClass: function(record, column) {
var c = record.get('q3');
if (c < 50) {

return 'cellBGRed3';
}
else if(c > 50)
return 'cellBGGreen3';
var c1=record.get('q4')
if (c1 < 50) {

return 'cellBGRed4';
}
else if(c1 > 50){
return 'cellBGGreen4';
}

}
}

CSS:


.cellBGRed3 .colorColumnQ3{

background-color: #FF0000;
}
.cellBGGreen3 .colorColumnQ3{

background-color: #32B232;
}s
.cellBGRed4 .colorColumnQ4{

background-color: #FF0000;
}
.cellBGGreen4 .colorColumnQ4{

background-color: #32B232;
}

But the Color is Applied only for the First Column, what to do, if i need a different color to appear in the second column

36378

Tim Toady
20 Jun 2012, 7:18 AM
Putting a renderer on your columns may be better suited to your situation.

scottmartin
20 Jun 2012, 8:00 AM
Please review this article. Good information about coloring a grid.
http://skirtlesden.com/articles/styling-extjs-grid-cells

Scott.

prijithkr
20 Jun 2012, 7:23 PM
By Calling renderer each column and appying CSS class to them, it applies the class to the entire column, but i want to apply different classes to different set of cells, as i need to apply more than 3 colors to more than 3 columns and the color varies for each row, some what like this.....

36406

Romick
21 Jun 2012, 12:32 AM
Hi!
I recomend you use column renderer for this perpuse.

renderer: function(val, metadata, record){
var backgroundColor = record.get('backgroundColor');
metadata.tdAttr = Ext.String.format('style="background-color: {0}!important;"', backgroundColor);
//or in your case if there are not so many colors and they are predefined and you have css:
metadata.tdCls = 'cssClassColor';//for each cell css not for all row or all column
}

Tim Toady
21 Jun 2012, 6:36 AM
By Calling renderer each column and appying CSS class to them, it applies the class to the entire column, but i want to apply different classes to different set of cells, as i need to apply more than 3 colors to more than 3 columns and the color varies for each row, some what like this.....

36406

A renderer will indeed allow you to change the color based on the cell. See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

The second param to the renderer function is metaData. It has the tdCls property on it or alternatively you could use the style property.

You also have the cell's value (1st param) and the record for that row(3rd param) to base the style or class on.

prijithkr
21 Jun 2012, 6:18 PM
Thanks Guys... It worked using renderer and "style"