Programtic Menu Bar Nesting

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Programtic Menu Bar Nesting

Farley Carter
Hi All

I am trying to generate a MenuBar on the fly.

There are drop downs from the menuitems and some of these may have sub menus.

I get my menubar as expected and the first level drop downs appear when I click a menu item. Then the pop flips to the top left corner of the browser and I can select nothing.

I tried to set up a jsFiddle but I can't figure out how to set up that I am using Dojo. My Code follows.

require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/Menu", "dijit/MenuBarItem", "dijit/MenuItem", "dijit/CheckedMenuItem",
    "dijit/MenuSeparator", "dijit/PopupMenuItem", "dijit/MenuBar", "dijit/DropDownMenu", "dijit/PopupMenuBarItem",
    "dojo/domReady!"
  ],
  function(parser, ContentPane, BorderContainer, Menu, MenuBarItem, MenuItem, CheckedMenuItem, MenuSeparator, PopupMenuItem, MenuBar, DropDownMenu, PopupMenuBarItem) {
    parser.parse();

    var mainBorder = new BorderContainer({
      style: "height: 100%; width= 100%;"
    });

    var titlePane = new ContentPane({
      region: "top",
      style: "width: 100%",
    });
    mainBorder.addChild(titlePane);

    var mainLeftPane = new ContentPane({
      region: "left",
      style: "width: 100px",
    });
    mainBorder.addChild(mainLeftPane);

    var mainCenterPane = new ContentPane({
      region: "center",
      content: "Hello World 2",
    });
    mainBorder.addChild(mainCenterPane);

    /////////////////////////////////////
    // Menu Setup
    ////////////////////////////////////

    var mainMenuBar = new MenuBar({});

    var configurationSubMenu = new DropDownMenu({});

    var accountingConfigurationSubMenu = new Menu({})

    accountingConfigurationSubMenu.addChild(new MenuItem({
      label: "General Ledger"
    }));

    accountingConfigurationSubMenu.addChild(new MenuItem({
      label: "Receivables"
    }));

    configurationSubMenu.addChild(new PopupMenuItem({
      label: "Accounting",
      popup: companyConfigurationSubMenu
    }));

    var companyConfigurationSubMenu = new Menu({})

    companyConfigurationSubMenu.addChild(new MenuItem({
      label: "Company Information",
    }));

    companyConfigurationSubMenu.addChild(new MenuItem({
      label: "Global Preferences",
    }));

    configurationSubMenu.addChild(new PopupMenuItem({
      label: "Company",
      popup: companyConfigurationSubMenu
    }));

    configurationSubMenu.addChild(new MenuItem({
      label: " "
    }));

    mainMenuBar.addChild(new PopupMenuBarItem({
      label: "Configuration",
      popup: configurationSubMenu
    }));

    titlePane.addChild(mainMenuBar);
    mainMenuBar.startup();

    mainBorder.placeAt(document.body);
    mainBorder.startup();
  });


Any help with getting jsFiddle to show it would also be nice;

My html file:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href='js/dijit/themes/claro/claro.css'>
        <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; } #borderContainer { width: 100%; height: 100%; } </style>        <script>dojoConfig = {parseOnLoad: true}</script>        <script src = 'js/dojo/dojo.js'></script>        <script src = 'js/index.js'></script>    </head>
    <body class="claro">
    </body>
</html>
Farley
Any argument is viable, until logic and reality set in.
Reply | Threaded
Open this post in threaded view
|

Re: Programtic Menu Bar Nesting

Farley Carter
btw the nabble that I can't sort out is https://jsfiddle.net/fbcarter/st4ugxz2/15/
Farley
Any argument is viable, until logic and reality set in.
Reply | Threaded
Open this post in threaded view
|

Re: Programtic Menu Bar Nesting

Farley Carter
Thanks.

I figured it out.
Farley
Any argument is viable, until logic and reality set in.