Image not displayed in xe:basicContainerNode from Extension Library in XPages - dojo

Question

I have the following code for a popupmenu from Extension library
<xe:popupMenu id="pop">
<xe:this.treeNodes>
<xe:basicContainerNode image="/vwicn148.gif" label="Container">
<xe:this.children>
<xe:basicLeafNode label="Child" image="/vwicn148.gif"></xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes></xe:popupMenu>
<xp:link escape="true" text="Open popup" id="link1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('pop').getMenuCtor()})]]></xp:this.script>
</xp:eventHandler>
</xp:link>
The result looks like this
As you can see the image for the basic containerNode is not displayed but the image for the basicLeafNode is displayed.
I want to add an arrow to the container node so that users know it has sub items, how can I do that?

Answer 1

Using firebug I can see that the image icon for the basicContainerNode has the class "dijitNoIcon" added to it, which sets "display:none" for the icon image. Whereas the leaf node does not have that dijiNoIcon class added. (I might need to look into that further as a possible defect)
But, as a workaround you could use some custom CSS to override what dijitNoIcon is doing.
<xe:basicContainerNode image="/vwicn148.gif" label="Container" styleClass="showIcon">
And add a custom css file to your application with the following:
.showIcon .dijitNoIcon{
display: block;
}