PDA

View Full Version : Giving tree nodes custom icons



PCSpectra
5 Feb 2010, 5:14 PM
I've googled and searched the threads but nothing seems to work, except the following:




.x-tree-node-leaf .x-tree-node-icon {
background-image: url(icons/stop.png);
}

.x-tree-node-expanded .x-tree-node-icon {
background-image: url(icons/node.png);
}

.x-tree-node-collapsed .x-tree-node-icon {
background-image: url(icons/node.png);
}


I have three types of nodes:

1. Parent nodes which I want node.png to be used (both expanded and collapsed)
2. Child nodes which *can* contain other nodes which I want to also use node.png
3. Child nodes which *cannot* contain other nodes

The latter two are confusing me. Both are leaf nodes but one is marked as leaf and cannot have children dropped under them whereas the other *can* have a child dropped under them.

Right now *all* leaf nodes (whether they can accept children or not) use 'stop.png' but ideally only those which are marked in JSON as leaf should use stop.png -- the other should use node.png.

I have tried adding a custom class to the JSON using iconCls but I did something wrong in CSS cause nothing worked...

Cheers,
Alex

tobiu
6 Feb 2010, 1:34 AM
hi alex,

i use

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

a lot, working fine. example:



iconCls : 'book'


leading to the CSS:


.book {
background-image:url(../images/icons/book.png) !important;
}


if you want to do it without CSS, use
icon : String
The path to an icon for the node. The preferred way to do this is to use the cls or iconCls attributes and add the i...
The path to an icon for the node. The preferred way to do this is to use the cls or iconCls attributes and add the icon via a CSS background image.

kind regards,
tobiu

PCSpectra
6 Feb 2010, 11:46 AM
I have tried this approach it doesn't seem to work:



<img unselectable="on" class="x-tree-node-icon test" src="ext/resources/images/default/s.gif" id="extdd-5">


That is the HTML so indeed my 'test' iconCls is being added to the element

Here is my CSS:




.test {
background-image: url(icons/package.png);
}



Pretty simple and yet the icon stays the same or at least what is dictated by the control by default or what I set with the following CSS:




.x-tree-node-leaf .x-tree-node-icon {
background-image: url(icons/page_link.png);
}


.x-tree-node-expanded .x-tree-node-icon {
background-image: url(icons/page.png);
}


.x-tree-node-collapsed .x-tree-node-icon {
background-image: url(icons/page.png);
}



Not sure what I am missing???


Cheers,
Alex

tobiu
6 Feb 2010, 12:24 PM
does



background-image: url(icons/package.png) !important;


help?

PCSpectra
6 Feb 2010, 1:36 PM
Bingo!! Thats what I get for not copying verbatim I guess. :P

The !important made all the difference, I assume it somehow tells CSS to use this image over any default assigned???

Cheers,
Alex