Tree with different leaf image Is it Possible?....

[pravin_bluebird]

Hello All,

Is it possible to have more than one image for a leaf node.
Means for different type of category there should be different Leaf Image.

Regards

[mystix]

http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#config-cls
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#config-iconCls

[pravin_bluebird]

Thnaks
mystix,

One more question.
How can a single tree have multiple Iconcls and cls ?

Any example related this...........

Regards

[para]

When a node is created (via whatever method), there is a class assigned to the div of the tree node. This class can be used to define which icon to use.
So when creating a new node, do something like


new Ext.tree.TreeNode({text:'Whatever', cls:'my-custom-icon-class'})

and then in your css


.my-custom-icon-class .x-tree-node-icon {
background: transparent url(mypic.png) no-repeat;
}


Does this answer your question?

[pravin_bluebird]

Yes It Is

Thanks Para,

[JGALFO]

with this, I override all of the expanded icons in the tree..
x-tree-node-expanded .x-tree-node-icon {background-image:url(open.gif);}

In your example:

.my-custom-icon-class .x-tree-node-icon {
background: transparent url(mypic.png) no-repeat;
}

how do I specify the "expanded" icon of .my-custom-icon-class as well? I tried a few things but I can't quite get it

[para]

I never figured that out in a clean way.

The problem is that the classes are on the same element, so you can't specify them quite right...

The way I ended up doing it (if I remember correctly) was to update the wrapper with the custom class, so something like...


renderedNode.ui.wrap.addClass(renderedNode.attributes.cls);


Then you can do CSS similar to


.myCustomClass > .x-tree-node-ct > .x-tree-node-icon {
background: transparent url(mypic.png) no-repeat;
}

Be careful you don't set a more generic rule, because you will change all nodes under that node if you do.

I can't guarantee that code works, but it should be close to what you need to get it working. If anyone else has a cleaner suggestion, please let me know too. :)