View Full Version : how to use Ext.Tree.Panel

1 Sep 2011, 11:27 AM
I wanted to use sencha tree with custom node designs and icons, I have tried to apply tpl and randerTpl configs of Ext.Tree.Panel class, but it does not affects the appearance of branches and nodes of the tree.

Can someone give me the example that how I can use the custom ttemplet to create the three.

1 Sep 2011, 6:25 PM
What is it you want to do exactly? Structural changes are quite complicated but if you just want to change the icons you can just use CSS:

Ext.create('Ext.tree.Panel', {
cls: 'custom',

.custom .x-tree-icon {
background-image: url(...);

.custom .x-grid-tree-node-expanded .x-tree-icon {
background-image: url(...);

.custom .x-tree-icon-leaf {
background-image: url(...);

You can also set the icon for an individual node using iconCls.

The config options lines and useArrows perform 2 common styling requirements.

6 Sep 2011, 9:54 AM
hey skirtle,
this is not exactly I want,
I wanted to show node count next to the node name. for that I wanted to use template but I dont know how to use template with tree panel. ??
This is the tree I wanted to create. the count displayed on right should be updated dynemically as user add or remove the item form or to the branch. Can you please give me some hint the how can I use the template for each and every branch..


6 Sep 2011, 6:21 PM
I don't think templates are the way to go. Use a renderer function on the column. You may also need to force a view refresh when nodes are added/removed as it probably won't pick it up automatically.