1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    65
    Vote Rating
    0
    thameema is on a distinguished road

      0  

    Default Alpha 1.0 - Menu with image (not toolbar)

    Alpha 1.0 - Menu with image (not toolbar)


    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. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    42
    Vote Rating
    0
    mnugter is on a distinguished road

      0  

    Default


    this should do it:

    Code:
    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:

    Code:
    [img]/path/to/image.gif[/img]

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    65
    Vote Rating
    0
    thameema is on a distinguished road

      0  

    Default


    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. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    42
    Vote Rating
    0
    mnugter is on a distinguished road

      0  

    Default


    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. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    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.

Similar Threads

  1. Using the Toolbar as a menu
    By Animal in forum Ext 1.x: User Extensions and Plugins
    Replies: 132
    Last Post: 23 Oct 2008, 4:38 AM
  2. toolbar menu on basic dialog or LayoutDialog
    By reang in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 21 Mar 2007, 11:27 PM
  3. Menu/Toolbar basic concepts
    By fecund in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 6 Mar 2007, 12:21 PM
  4. IE6 FF difference in toolbar menu
    By vtswingkid in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 22 Feb 2007, 8:44 AM
  5. Problem with Toolbar background Image
    By nnance in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Feb 2007, 9:36 PM

Thread Participants: 2