PDA

View Full Version : applying a custom style to a treenode in config



dirtdevil
29 Aug 2009, 5:26 PM
I know you can apply a CSS class to a treenode in the config using the cls attribute but can you apply a custom style such as {style: {color: 'bolder'} } to the treenode config? I have a tree that needs to apply text css changes to the nodes depending on certain backend attributes so there will be so many different css combos, theres no way I can fit all of them into CSS classes but I can apply the light tweaks to each node on the backend in the cfg.

I checked the docs and did forum searches but all I found where a zillion posts on changing the style AFTER the nodes been loaded but not in config.

dirtdevil
30 Aug 2009, 8:42 AM
bump

steffenk
30 Aug 2009, 8:46 AM
no

why don't you look to source code? The doc links to the source, so you see all options.

If you want to, you have to extend Treenode

dirtdevil
30 Aug 2009, 9:44 AM
Great idea. I already know how to get to the style of a node (through the ui.textNode obj) But I can't seem to apply it to my extended AsyncTreeNode...



Ext.world.AsyncTreeNode = Ext.extend(Ext.tree.AsyncTreeNode, {
initComponent:function() {
Ext.fly( this.ui.textNode ).setStyle({
color: 'blue'
});
Ext.world.AsyncTreeNode.superclass.initComponent.apply(this, arguments);
}, onRender:function() {
Ext.world.AsyncTreeNode.superclass.onRender.apply(this, arguments);
}
});

dirtdevil
30 Aug 2009, 11:56 AM
bump

dirtdevil
31 Aug 2009, 9:53 AM
bump...bump

dirtdevil
2 Sep 2009, 6:36 AM
bump

dirtdevil
3 Sep 2009, 9:48 AM
I did some research and found that I can't just extend with initComponent because initComponent only works with classes that extend component. Treenodes don't do that. I found an ugly way around it this way...



{
xtype: 'treepanel',
treepanel stuff...
root: new Ext.world.AsyncTreeNode({
text: 'My Account',
leaf: false,
listeners: {
expand: function(node){
node.cascade(function(){
if( this.attributes.style ){
Ext.fly( this.ui.textNode ).setStyle(this.attributes.style);
}

});
}
}
}


The problem is, applying a custom style to a tree node is so powerful and such a general feature, I would like to attach it to the core of asynctreenodes and treenodes so I don't have to keep copying and pasting this same snippet of code for every treepanel. Since treenodes don't use component, I tried to add it by extending onRender but that didn't work...



Ext.world.AsyncTreeNode = Ext.extend(Ext.tree.AsyncTreeNode, {
onRender:function() {

this.on({
'expand' : function(){
console.log('I am expanded');
}
});

Ext.world.AsyncTreeNode.superclass.onRender.apply(this, arguments);
}
});