Programatic Toolbar with Menu as elements

Submitted by raymadigan on Thu, 10/30/2008 - 19:30.

I am trying to make a toolbar in such a way that some of the elements are menu's. The toolbar menu elements show up under the toolbar buttons and are not visible. Any suggestions or should I try a different approach?

Thanks

dojo.require("dojo.parser");
dojo.require("dijit.Toolbar");
dojo.require("dijit.Menu");

var toolbar = new dijit.Toolbar ( {id: "toolbar"}, document.createElement ( "div" ) );
dijit.byId ( "menu" ).domNode.appendChild ( toolbar.domNode );

toolbar.addChild ( new dojo.form.Button ( {id: "idone", label: "one"} );
toolbar.addChild ( new dojo.form.Button ( {id: "idtwo", label: "two"} );

var menuOne = new dijit.Menu ( {id: "fooOne"} );
menuOne.addChild ( new dijit.MenuItem ( {id: "foo", label: "foo"} );
toolbar.addChild ( menuOne );

var menuTwo = new dijit.Menu ( {id: "barTwo"} );
menuTwo.addChild ( new dijit.MenuItem ( {id: "bar", label: "bar"} );
toolbar.addChild ( menuOne );

menuOne.startup ( );
menuTwo.startup ( );
toolbar.startup ( );

Login or register to post comments
Unsubscribe post

solution

Submitted by neonstalwart on Thu, 10/30/2008 - 22:18.

first, there are many typos in what you posted above. so many, that i'm assuming you didn't cut and paste this from an "almost" working page. most of your lines that have new ... are missing an ending ')' and in the 2nd menu you try and add menuOne as a child... however, i'll move past that and onto a solution for you.

i have pasted a working copy below, if you cut and paste it, you should be able to use it inside an html tag.

the basic steps are this:
1 - create a toolbar, toolbar
2 - create some buttons, idone and idtwo
3 - create a menu, menuOne
4 - add a button to the menu
5 - add the menu to a DropDownButton, button1
6 - add the DropDownButton to the toolbar
7 - repeat 3-7 for menuTwo

The hierarchy is like this:

toolbar
    - idone
    - idtwo
    - button1
        - menuOne
            - foo
    - button2
        - menuTwo
            - bar

you were going in the right direction, you just needed the DropDownButtons.

<head>
<title>Dojo Toolkit Test Page</title>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2/dijit/themes/tundra/tundra.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/resources/dojo.css";
</style>

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/dojo.xd.js'
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dijit.Toolbar");
dojo.require("dijit.Menu");
dojo.require("dijit.form.Button");

// note: addOnLoad is necessary because i'm using the cdn
// and also since you're trying to reference either a node or
// a widget, you should also have this within an addOnLoad
dojo.addOnLoad( function(){
// create a new toolbar in the node with id="toolbar"
var toolbar = new dijit.Toolbar({id: "toolbar"}).placeAt(dojo.byId("toolbar"));

// add 2 buttons
toolbar.addChild(new dijit.form.Button({id: "idone", label: "one"}));
toolbar.addChild(new dijit.form.Button({id: "idtwo", label: "two"}));

// create a new menu
var menuOne = new dijit.Menu({id: "fooOne"});
// add a button
menuOne.addChild(new dijit.MenuItem({id: "foo", label: "foo"}));
// create a new DropDownButton with the menuOne as the dropDown
var button1 = new dijit.form.DropDownButton({
id: "menuHolder1", label: "fooOne",
dropDown: menuOne});
// add the DropDownButton to the toolbar
toolbar.addChild(button1);

// repeat for the 2nd menu...
var menuTwo = new dijit.Menu({id: "barTwo"});
menuTwo.addChild(new dijit.MenuItem({id: "bar", label: "bar"}));
var button2 = new dijit.form.DropDownButton({
id: "menuHolder2", label: "barTwo",
dropDown: menuTwo});
toolbar.addChild(button2);

// startup the toolbar - it should startup it's children
toolbar.startup();
});

</script>
</head>

<body class="tundra">
<h1> The Toolbar goes under here </h1><br>

<div id="toolbar"></div>
</body>

Search

Programatic Toolbar with Menu as elements

solution