Using dijit/DropDownMenu in a custom WAB widget

345
3
03-25-2019 01:43 PM
BryceWhiteside
New Contributor

I'm trying to use dijit/DropDownMenu in a custom WAB widget but can't seem to get it to work. Can anyone point me to some sample code or API docs? Thank you!

Tags (1)
0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Bryce,

   You are probably missing something simple in your code. Can you post your attempt to use the dijit inside your widget?

0 Kudos
BryceWhiteside
New Contributor

Hi Robert,

Thanks for replying. Here is my Widget.js:

define(
['dojo/_base/declare',
'dojo/parser',
'dijit/DropDownMenu',
'dijit/MenuItem',
'dijit/MenuSeparator',
'dijit/PopupMenuItem',
'jimu/BaseWidget',
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.3.1.min.js, https://code.jquery.com/ui/1.12.1/jquery-ui.min.js'
],
function(
declare,
parser,
DropDownMenu,
MenuItem,
MenuSeparator,
PopupMenuItem,
BaseWidget,
$,
){
    return declare(BaseWidget, {
        
        baseClass: 'jimu-widget-pagwidget',
        
        startup: function () {
            var map = this.map;

            $('#txtTest').text('Dijit Test');       

        }
    });
});

And here is my Widget.html:

<div>
    <div id="txtTest"></div>
<div data-dojo-type="dijit/DropDownMenu" id="navMenu">
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut',
            onClick:function(){alert('cut!')}">Cut</div>
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy',
            onClick:function(){alert('copy!')}">Copy</div>
        <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste',
            onClick:function(){alert('paste!')}">Paste</div>
        <div data-dojo-type="dijit/MenuSeparator"></div>
        <div data-dojo-type="dijit/PopupMenuItem">
            <span>Action</span>
            <div data-dojo-type="dijit/DropDownMenu" id="submenu2">
                <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('nested #1!')}">Nested #1</div>
                <div data-dojo-type="dijit/MenuItem" onclick="alert('nested #2!')">Nested #2</div>
            </div>
        </div>
    </div>
</div>

I took the example from dijit/DropDownMenu — The Dojo Toolkit - Reference Guide 

Thanks for your help,

Bryce

0 Kudos
BryceWhiteside
New Contributor

Hi again. Turns out I had to call parser.parse() in the startup function. Problem solved. Thanks for your time.

0 Kudos