set icon for dijit.MenuItem

问题

We have a case where we only know the icon for a menu item at runtime. I know there is a iconClass parameter for a diji.MenuItem, but this is of little help unless we dynamically add CSS rules at runtime with dojox.html.insertCssRule - there must 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)
}));

回答1:

Sure, there's a better way although not ideal, something like:

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

回答2:

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


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" }  
        });
    });

The simple Foo.FooMenuItem class can then just have the "icon" property set when the class is initialized, and the value set will be inserted in the img src filed for the icon. It can be referenced something like this:


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

来源：https://stackoverflow.com/questions/2126220/set-icon-for-dijit-menuitem

标签

dojo