PDA

View Full Version : when I add an icon in a tree node the image isn't well displayed



flamant
22 Feb 2011, 6:45 AM
Hi,
the html element icon image of a tree node looks like the following :



<img class="x-tree-node-icon myClassImage" unselectable="on" scr="/enable/ext/resources/images/default/s.gif" alt="">


Depending on the property of a node, I try to add a second and a third icon image by adding after the previous img element the following img element :



<img class="x-tree-node-icon mysecondClassImage" unselectable="on" scr="/enable/ext/resources/images/default/s.gif" alt="">
<img class="x-tree-node-icon mythirdClassImage" unselectable="on" scr="/enable/ext/resources/images/default/s.gif" alt="">


unfortunately the images are displayed with a square around it and a small square inside it. It is strange because I reproduce exactly the same img tag than the icon img of the tree node. I must have missed something.

24792

Thank you in advance for your answers

drian
22 Feb 2011, 8:53 AM
try iconCls property for the node. Basically use a different class for your icons depending on your condition

flamant
22 Feb 2011, 11:00 AM
Hi drian and thank you for your answer,

unfortunately iconCls property will work for only one background image. I have no way to tell extjs and css to put the images side by side

drian
22 Feb 2011, 10:25 PM
you can make separate css classes for each situation, each class having as background 1 image, and that image is in fact 2 or more images put side by side in photoshop :)

Condor
23 Feb 2011, 5:53 AM
That's indeed the solution I would recommend (have the css rule for .myClassImage contain a background-image with an image that contains multiple icons and increases the <img> width so they become visible).

If you actually want multiple <img>s then you'll have to create your own TreeNodeUI extension and override the renderItems method to render multiple <img>s instead of only one.