tree menu icons

[Stoneyx]

I want some changes to my tree, but dont know if it is possible.

here is my example menu
http://sebas.ingrit.nl/menu.gif

Now i was wondering, how can i change seperate icons?
i found in css how to change the icons, but that wil change all..
I want to give ever Item an different icon.

can i add an id of class to my json menu structure, so i can make different css styles for the icons?

[fay]

I'm not 100% sure of this but I think when you create a node you can specify its attributes.icon (which will be the location of its img). Open ext-all-debug.js and look at the render() method of TreeNodeUI.

[6epcepk]

You can use iconCls attribute each nodes config.

[Stoneyx]

I'm not 100% sure of this but I think when you create a node you can specify its attributes.icon (which will be the location of its img). Open ext-all-debug.js and look at the render() method of TreeNodeUI.

I will take a look at it..


You can use iconCls attribute each nodes config.
I can use that like this? (this is an sub sub item)

{"text" : "Sub sub item 1", "id" : "100000", "leaf" : true, "cls" : "file", "iconCls" : "path to icon"}

[Stoneyx]

i did this

{"text" : "Item 1", "id" : 1000, "leaf" : false, "iconCls" : "testitem1", "children" : [
{"text" : "Sub item 1", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "Sub sub item 1", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Sub sub item 2", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "Sub sub item 3", "id" : "100002", "leaf" : true, "cls" : "file"}
]
}]
}

and added this in my css

.x-tree-node-collapsed .x-tree-node-icon .testitem1
{
background-image:url(../../images/Ext/Tree/drop-add.gif);
}

but it isn't working..
the path to the images are ok, all images work.

[ApocalypseCow]

try this syntax instead:

.testitem1 .x-tree-node-icon {background-image:url(../../images/Ext/Tree/drop-add.gif);}

[para]

This has been asked many times.

http://extjs.com/forum/showthread.php?t=7876&highlight=node+icon
http://extjs.com/forum/showthread.php?t=12149&highlight=node+icon



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

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

[Stoneyx]

try this syntax instead:

.testitem1 .x-tree-node-icon {background-image:url(../../images/Ext/Tree/drop-add.gif);}

i tried these syntaxes

.testitem1 .x-tree-node-icon
testitem1 .x-tree-node-icon
.x-tree-node-icon .testitem1
.x-tree-node-icon testitem1

all dont work,
Do i need some extra files for this to work?
beside TreeNode.js

[para]

Umm.... I just told you how to do it.

All you have to do is include the 'cls' attribute as 'my-custom-icon-class' and then have an entry in a stylesheet that looks like the entry above.

Also look at the posts I included.

[Stoneyx]

Umm.... I just told you how to do it.

Well the wierd thing is.. i see your post just now.. it wasn't there when i posted my question..

But indeed what you said works, so thanks alot :)

BTW




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

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


Why png? png files give gray bg in IE with tranperentcy.

[para]

True. I'm using png because I'm only supporting FF.
I wish that IE would support png better. Then again, I wish IE would do a lot of things better.

[JeffHowden]

Why png? png files give gray bg in IE with tranperentcy.

Because you have more than one channel of transparency in PNGs so you end up with much cleaner edges. The grey background is only an issue in IE6. IE7 handles transparent PNGs beautifully.

[John Holmes]

i'm getting lost.

What is the difference between cls and iconCls to change a node icon? Why if i use iconCls nothing happend? Why if i use cls the node dosen't update icon when expanding?

[para]

From TreeNodeUI.js line 381:


var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', a.cls,'">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon" />',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : ' />')) : '',
'<a hidefocus="on" href="',href,'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"];

Notice the placement of the classes. CLS is placed on the container div of the tree node. This allows you to modify many things, not just the icon. You can change any aspect of the TreeNode's style. ICONCLS is placed on the icon image itself, so it will only allow you to modify the style of the icon.
I believe that you could do something like: (although this is untested)


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

.my-custom-icon-class {
src: "mypic.png";
}


I stick with the CLS because it allows more flexibility in the modification of style.

Hope this helps.

[John Holmes]

From the help


iconCls : String TreeNode
A css class to be added to the nodes icon element for applying css background images


Actually nothing seems to change if I set the iconCls config option with a CSS class like this:




.x-tree-node-myimage {
background: transparent url(...) no-repeat;
}


Probably i'm missing something declaring well the CSS class with the right selector?