Treepanel node color

[Romick]

Hi!

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.
First-one:
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>
Second-one:
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;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
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.

[tobiu]

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.

[Romick]

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!

[tobiu]

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.