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

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;
}