Installation icon for dijit.MenuItem

Question

We have a case where we only know the icon for a menu item at runtime. I know that there is an iconClass parameter for diji.MenuItem , but that doesn’t help much if we don’t dynamically add CSS rules at runtime using dojox.html.insertCssRule - there should be a better way!

Here is an example of what we are trying to do:

 pMenu = new dijit.Menu({ targetNodeIds: ["NEW_APP"], leftClickToOpen: true }); pMenu.popupDelay = 100; pMenu.addChild(new dijit.PopupMenuItem({ label: "clocks", iconSrc: "image/clocks.png", onClick: dojo.hitch(core.editor, core.editor.createNewApp) })); 

Answer 1

Of course, there is a better way, although not ideal, something like:

myMenuItem.iconNode.style.cssText = "background-image: url(...); width: 16px, height: 16px";

Answer 2

Link to http://robrobbins.info/?p=372 for an older version of dojo. In newer syntax, a class can be defined as follows to do the same:

 define("Foo/FooMenuItem", ['dojo', 'dijit/dijit', "dojo/_base/declare", "dijit/MenuItem"], function(dojo, dijit, declare, MenuItem) { return declare("Foo.FooMenuItem", [MenuItem], { iconSrc: "unknown", _setIconSrcAttr: {node: "iconNode", type: "attribute", attribute: "src" } }); }); 

In the simple Foo.FooMenuItem class, the "icon" property can simply be set when the class is initialized and the set of values ​​is inserted into the img src file registered for the icon. You can refer to it like this:

 pMenu.addChild(new Foo.FooMenuItem ({ label: "clocks", iconSrc: "image/clocks.png", onClick: dojo.hitch(core.editor, core.editor.createNewApp) }));