Changing tree icons doesn't work

[thaberkern]

Hi,

i have the problem that i can't get the tree icons of my tree customized.

I creating my tree like this



var root = new Tree.AsyncTreeNode({
text: 'Root',
id:'1',
allowDelete: false,
cls:'group',
iconCls:'group',
nodeType: 'group',
allowEdit: false
});
tree.setRootNode(root);
tree.render();


And i have a style:

.group .x-tree-node-icon {
background-image:url('/images/package.png') no-repeat;
}

This renders to (Firebug inspect):



<li class="x-tree-node">
<div class="x-tree-node-el group x-tree-node-expanded x-tree-selected">
<span class="x-tree-node-indent"/>
<img id="ext-gen177" class="x-tree-ec-icon x-tree-elbow-end-minus" src="http://extjs.com/s.gif"/>
<img id="ext-gen174" class="x-tree-node-icon group" unselectable="on" src="http://extjs.com/s.gif"/>
<a id="ext-gen171" tabindex="1" href="#" hidefocus="on">
</a>
</div>
<ul id="ext-gen263" class="x-tree-node-ct" style="visibility: visible; position: static; left: auto; top: auto; z-index: auto;">
</ul>
</li>


But it doesn't work... I'm pretty confused. Please help

Timo

[Animal]

Check where the img is picking up its styling from. IIRC, you are competing with a CSS selector with quite a high precedence. Try adding "!important"

[thaberkern]

thanks you are right. Problem was, that the ext-all.css was loaded after my main.css file.

Now everything works as expected \:D/

[sj137]

try adding

.x-tree-node img.group, .x-tree-node-collapsed img.group{
background-image:url(/imagesfolder/yourimage.gif);
}

to the style section on your page... (or css file)

works for me ;)