View Full Version : Treepanel node color

8 Dec 2011, 3:15 AM

I have treePanel with two columns. I need to change background-color only in the first column, but color is different and cames from treeStore.
I found two ways29881 but both is bad.
using renderer metadata

text: '#',
dataIndex: 'col1',
width: 30,
renderer: function colorExampleRenderer(val, metadata, record, rowIndex){
metadata.style = 'background: red';//record.get('mycolor');
//metadata.tdCls = 'myColor';
return val;

but background color covered only in <div> element not in <td>
I set up tdCls property

text: '#',
dataIndex: 'col1',
width: 30,
tdCls: 'x-change-cell'

And use view config of the tree:

viewConfig: {
getRowClass: function(record, index) {
var c = record.get('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
Also set css styles:

.price-fall .x-change-cell {
background-color: #FFB0C4;
.price-rise .x-change-cell {
background-color: #B0FFC5;
But this time i havent posibility to change background color dependence of color in record, becouse here i dont know how to create ccs style dynamicly.
Has anyone solved this problem? I need your help.

8 Dec 2011, 4:21 AM
metaData : Object
A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

take a look at the other metadata properties.

8 Dec 2011, 5:13 AM
Thank you Tobiu!
I found a solution with your help:

var myColor = record.get('myColor');
metadata.tdAttr = 'style="background: '+myColor +'"';

P.S. I inspect object metadata in FireBug. But there was only tdCls and style. And i dont see tdAttr. I dont know why. And is it a hack metadata.tdAttr = 'style=..' or it is all ok? For using such constraction.

Anyway it works! Thanks!

8 Dec 2011, 5:22 AM
the tdAttr is meant to apply attributes of all kind, like

<td width="20%">

which is not a good coding style btw.

adding a style to it is fine imho, you can also check if a td has already a style checked and if yes merge your style with that one. as far as i know the td tag does not have styles applied by default, but i recommend to validate this with your debugging tools.