PDA

View Full Version : How do you add an image to a menu item?



netski
24 Jun 2009, 10:16 AM
Hello,

Anyone know how to add an image to a menu item? I would like to add an image to a menu item that is controlled by a toolbar button. For instance, if I clicked on the toolbar button Show Image an image would show below.

Cheers,
Timothy

PierceSD
24 Jun 2009, 1:29 PM
Like an icon?

If you use Ext.Action (http://extjs.com/deploy/dev/docs/?class=Ext.form.Action) to build your menu items, you could use the setIconClass() method to toggle the icon when the user clicks the button.

netski
24 Jun 2009, 2:12 PM
Nope was hoping to put a full image in. (300 height and 200 width)

Cheers,
Timothy

PierceSD
24 Jun 2009, 3:49 PM
You'd need to play with the dom yourself.


var mi = Ext.getCmp("my-menu-item");
mi.getEl().createChild({tag: "img", src: "/my/big/pic.jpg"});


I'm trying to picture what you're doing, and must admit I'm not quite getting it. The user clicks on a toolbar button and a big picture shows up as a menu item on a menu somewhere else? Or is the toolbar button a menu button and you want the image to show up in the menu that appears below it when you click on the button?

If it's the latter (which makes sense to me :) ), and the only purpose of the button is to show an image (i.e., no other menu items), perhaps a ToolTip is a better way to go. You can create them in response to the click event of the toolbar button.



...
tbar: [{
text: "Show Image",
handler: function(menuItem) {
var tt = new Ext.ToolTip({
html: {tag: "img", src:"/my/big/pic.jpg"}
});
tt.targetXY = menuItem.getEl().getAnchorXY("bl");
tt.show();
}, {
...
}]
...

aconran
24 Jun 2009, 5:38 PM
In Ext 3, Menu's are fullweight containers with legitimate layout managers. This means that they contain any valid BoxComponent. Therefore you could add a boxcomponent with the markup you want (an image tag) in the menu.

netski
26 Jun 2009, 8:37 AM
In Ext 3, Menu's are fullweight containers with legitimate layout managers. This means that they contain any valid BoxComponent. Therefore you could add a boxcomponent with the markup you want (an image tag) in the menu.

@aconran Thanks for the suggestion I think that is a real clean solution :)

@PierceSD Thanks for your help!