Alpha 1.0 - Menu with image (not toolbar) - Ext JS

I am using Alpha 1.0 menu API to build the menu which is similar to yahoo menu YUI example, http://developer.yahoo.com/yui/examp...pwithanim.html

I checked the example coming with the alpha package and it has only toolbar example. My requirement is the initial parent menu is an image and mouse over that image will render the child menu. Please help me achieve this.

Thanks,
Thameem

# 2   02-23-2007, 05:21 AM

this should do it: var menu = new Ext.menu.Menu({shadow: false}); menu.add( {id:"opt1", text: 'option1'}, {id:"opt2", text: 'option2'} ); Ext.get('test').on('mouseover', function() { menu.show(Ext.get('test'), "tl-bl") }); Having this image tag: [img]/path/to/image.gif[/img]

# 3   02-23-2007, 05:35 AM

Thanks for the suggestion. But I don't think this is the clear way to do it. Because when I mouse over the image it pops up the menu. But when I mouse out the menu stays there. If I add event handler for 'mouse out' its not even popping up the menu. And moreover the menu is appearing below the image. So, there might be a good way of doing this. Jack, You can shed some light on this. Thanks, Thameem

# 4   02-23-2007, 06:21 AM

The menu follows the windows-logic. When a menu is activated you can only deactivate it by clicking outside the menu. The problem with the mouseout event is that you will trigger it as soon as you leave the image (and enter the menu).

# 5   02-23-2007, 06:27 AM

The default logic as mnugter said is to hide on mousedown somewhere. If you need other logic it is definitely possible but you would have to add it. I can help, if you have questions. Also, the second param 'tl-bl?' is an alignTo alignment option. Take a look at Ext.Element.alignTo which has great documentation on the format for these alignment options.