You found a bug! We've classified it as EXTJS-11404 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default Ext JS 4.2.2 1160 9/23 Menu Item handler not executed inside a Container

    Ext JS 4.2.2 1160 9/23 Menu Item handler not executed inside a Container


    First off I understand about over nesting.

    I put grouped menu items into a container then add it to a Menu.
    When I do this the menu Item's handler never gets called neither does the listeners.

    I've tried bubbleEvents, listeners for click, and the handler. I simply remove the container and everything behaves correctly.

    So am I missing something?

    This used to work fine in Ext JS 3.4.0
    My company is finally upgrading to 4.2.2.

    If an example is needed let me know.

    Thanks.


  2. #2
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      1  

    Default


    I verified the click event is being added to the menu item inside the initcomponent but the onClick function is not being called inside the Ext.menu.Item source.

    If I remove the container it gets called correctly.

    So there is a disconnect within the menu items if they are getting added to a Container.

    I'm debugging our code line by line just to make sure.

    Edited: I verified it isn't our code not calling the onClick function.

  3. #3
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      1  

    Default


    After stepping into code the Ext.menu.Menu sets the item in it's onClick function to the wrong Component/Container.

    The item inside the code below is set to the Container instead of e.target that had the click event.

    me.getItemFromEvent(e) is setting the item to the parent instead of just setting it to e.target which has the menuitem component.
    PHP Code:
     // @private
        
    getItemFromEvent: function(e) {
            var 
    me this,
                
    renderTarget me.layout.getRenderTarget().dom,
                
    toEl e.getTarget();

            
    // See which top level element the event is in and find its owning Component.
            
    while (toEl.parentNode !== renderTarget) {
                
    toEl toEl.parentNode;
                if (!
    toEl) {
                    return;
                }
            }
            return 
    Ext.getCmp(toEl.id);
        } 
    PHP Code:
    onClick: function(e) {
            var 
    me this,
                
    item;

            if (
    me.disabled) {
                
    e.stopEvent();
                return;
            }

            
    item = (e.type === 'click') ? me.getItemFromEvent(e) : me.activeItem;
            if (
    item && item.isMenuItem) {
                if (!
    item.menu || !me.ignoreParentClicks) {
                    
    item.onClick(e);
                } else {
                    
    e.stopEvent();
                }
            }
            
    // Click event may be fired without an item, so we need a second check
            
    if (!item || item.disabled) {
                
    item undefined;
            }
            
    me.fireEvent('click'meiteme);
        } 
    Menu_item_click_event_firebug.jpg

  4. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,835
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Thanks for all of the details. Definitely seems like a bug. Any way you can post a test case that exhibits the issue?
    Get on the Fast Track with Sencha Training http://sencha.com/training

  5. #5
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    I will edit the Ext JS 4.2.2 menu example with the issue for a test case.

    I can't release anything I have from my work because it would be way too complex of a test case.

    The simplest way is to put a handler function on a menuitem and between an Ext.menu.Menu and the menu items put a Ext.container.Container.

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    I didn't do any special css so it looks weird but shows a good test case using the Menu example in Ext JS 4.2.2 9/26 nightly.
    Below is the menu.js in the Menu examples edited to give a test case.
    PHP Code:
    Ext.require([
        
    'Ext.tip.QuickTipManager',
        
    'Ext.menu.*'
    ]);

    Ext.onReady(function(){

        function 
    onItemClick(item){
            
    Ext.example.msg('Menu Click''You clicked the "{0}" menu item.'item.text);
        }

        
    Ext.QuickTips.init();

        
    Ext.get('container').setWidth(Ext.themeName === 'neptune' 860 750);

        var 
    tb Ext.create('Ext.toolbar.Toolbar');
        
    tb.render('toolbar');
        
    tb.suspendLayouts();

        var 
    scrollMenu Ext.create('Ext.menu.Menu');
        var 
    scrollMenu2 Ext.create('Ext.menu.Menu');
        var 
    menuContainer Ext.create('Ext.container.Container',{
            
    width300,
            
    height400
        
    });
        for (var 
    010; ++i){
            
    menuContainer.add(Ext.create('Ext.menu.Item',{
                        
    text'Item ' + (1),
                        
    handleronItemClick
            
    }));
            
    scrollMenu2.add({
                        
    text'Item ' + (1),
                        
    handleronItemClick
            
    });
        }
        
    scrollMenu.add(menuContainer);
        
    // scrollable menu
        
    tb.add({
                
    icon'preview.png',
                
    cls'x-btn-text-icon',
                
    text'Scrolling Menu with Container',
                
    menuscrollMenu
        
    });
        
    tb.add({
                
    icon'preview.png',
                
    cls'x-btn-text-icon',
                
    text'Scrolling Menu without Container',
                
    menuscrollMenu2
        
    });

        
    tb.resumeLayouts(true);
    }); 

  7. #7
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,835
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I can't get your code to run. Tried in 4.2.2.1160, 4.2.1.883, and 3.4.1. Here's a fiddle with the code in it. Perhaps I am missing something.
    https://fiddle.sencha.com/#fiddle/n5
    Get on the Fast Track with Sencha Training http://sencha.com/training

  8. #8
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    I edited the menu.js in the examples/menu folder of the nightly zip for 4.2.2.
    Just open the menu.html and it loads in chrome and firefox.
    I tried it before pasting it.

  9. #9
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,835
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Thanks. Sorry, you did say it was from the examples. Got it loaded and was able to reproduce. I filed EXTJSIV-11404 to handle the issue. Thanks for letting us know.
    Get on the Fast Track with Sencha Training http://sencha.com/training

  10. #10
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    577
    Vote Rating
    32
    aw1zard2 has a spectacular aura about aw1zard2 has a spectacular aura about

      0  

    Default


    Does this thread need to be moved to the bugs forum?