Dumb question about styling leaves in asyncTree...

[violinista]

Hello,

I have a problem with styling my tree, which is made asynchronously: there is "iconCls":"someCustomClass" parameter with every leaf, and it is applyied with IMG tag in tree leaves (checked in source code). The CSS file for styling tree is:



.someCustomClass {
background-image: url("images/icons/someIcon.png");
}

... and it does not working. The path to icon is correct. Also tried:



.someCustomClass .x-tree-node-icon {
background-image: url("images/icons/someIcon.png");
}

And it is again not working - it again displays default 'leaf.gif' image. I am using FF2.0.

The question is: how can I modify this CSS file to get desired behavior of custom leaf image?

I have read a lot of threads but I could not realize what style combination is working. Please help, as I am not a CSS expert. Only sample of CSS file for styling leaves is needed.

Thank you all in advance. And thank you, JSext team for providing such a powerful library.

[jsakalos]

Just a hint...

Try this:


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

[violinista]

Thank you for the quickiest answer ever! It is working now!

Is it bug or feature, or expected FF2 behaviour?? Just to know what is happening.

Thank you again, man.

[Animal]

Selector specificity, and the "!important" command: http://www.w3.org/TR/CSS21/cascade.html#specificity

[Animal]

So you could also have created a selector with higher specificity:



.x-tree-node img.someCustomClass, .x-tree-node-collapsed img.someCustomClass{
background-image: url("images/icons/someIcon.png");
}

[violinista]

I think your example relates to folder icon, as I see x-tree-node-collapsed class, which is used by folders. Or not?

Best regards to you, and thanks a lot, guys.

[Animal]

The iconCls is applied to an img tag which is a child of the tree node which is used to display the folder/leaf icon.

So the selector above allow you to target that img. By default it uses a folder icon or a leaf icon as its background, but you can have your class applied so that any image can be used.