Xpages - Using Dojo Module

Question

I have a custom control as below, which will basically used for creating menu. when I use this custom control in xpage, no styles are getting applied. However when I use a date time picker in the same xpage, the menu load fine with proper css. Seems very strange. For now I am using date time picker also in all xpages where menu is required. Can someone help me on this

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:dojoModule name="dijit.MenuBar"></xp:dojoModule>
<xp:dojoModule name="dijit.PopupMenuBarItem"></xp:dojoModule>
<xp:dojoModule name="dijit.Menu"></xp:dojoModule>
<xp:dojoModule name="dijit.MenuItem"></xp:dojoModule>
<xp:dojoModule name="dijit.PopupMenuItem"></xp:dojoModule>
</xp:this.resources>
<div dojoType="dijit.MenuBar" id="navMenu">
<div dojoType="dijit.PopupMenuBarItem"
onClick="gotoPage('/home.xsp')">
<span>Home</span>
</div>
<div dojoType="dijit.PopupMenuBarItem"
onClick="gotoPage('/onboarding.xsp')">
<span>OnBoarding</span>
</div>
<div dojoType="dijit.PopupMenuBarItem"
onClick="gotoPage('/offboarding.xsp')">
<span>OffBoarding</span>
</div>
</div>
</xp:view>

Answer 1

You have to set XPages property

dojoParseOnLoad="true"

with setting the property "Trigger Dojo parse on load" at Dojo tab. Then you'll get a nice menu without a date time picker.

Date time picker causes setting this property automatically during rendering. You can see the property at rendered page here:

<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js"
... parseOnLoad: true"></script>