You found a bug! We've classified it as EXTJS-3918 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default [4.0.2a] MVC: Controller to handle Ext.toolbar.Toolbar overflow menu items

    [4.0.2a] MVC: Controller to handle Ext.toolbar.Toolbar overflow menu items


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.0.2a

    Browser versions tested against:
    • FF6 (firebug 1.8.1 installed)

    Description:
    • If you have an app with the new MVC pattern and listen to toolbar buttons in a toolbar with enableOverflow: true via the control method, the events don't fire if you click on the items of the overflow menu.

    Steps to reproduce the problem:
    • run the test case

    The result that was expected:
    • the click event listener should be called

    The result that occurs instead:
    • listener isn't called if you click overflow menu items

    Test Case:

    app.js
    Code:
    Ext.Loader.setConfig({
    	enabled: true
    });
    
    Ext.application({
    	name: 'App',
    	controllers: [
    		'Main'
    	]
    });
    app/controller/Main.js
    Code:
    Ext.define('App.controller.Main', {
    	extend: 'Ext.app.Controller',
    	onButtonClick: function() {
    		console.info('click', arguments);
    	},
    	init: function() {
    		this.control({
    			'window toolbar button': {
    				'click': this.onButtonClick
    			},
    			'window toolbar button menu menuitem': {
    				'click': this.onButtonClick
    			}
    		});
    	},
    	onLaunch: function() {
    		Ext.create('Ext.window.Window', {
    			title: 'Test',
    			html: 'Resize the window so that the toolbar overflow menu becomes active and click buttons.',
    			width: 400,
    			height: 200,
    			resizable: true,
    			tbar: Ext.create('Ext.toolbar.Toolbar', {
    				enableOverflow: true,
    				items: [{
    					text: 'Toolbar Button No 1'
    				},{
    					text: 'Toolbar Button No 2'
    				},{
    					text: 'Toolbar Button No 3'
    				}]
    			})
    		}).show();
    	}
    });


    HELPFUL INFORMATION

    Debugging already done:
    • Ext.toolbar.Toolbar getRefItems should return the overflow menu items as well

    Possible fix:
    Code:
    Ext.toolbar.Toolbar.override({
    	getRefItems: function(deep) {
    		var result = this.callOverridden(arguments),
    			h;
    		if (this.enableOverflow) {
    			h = this.layout.overflowHandler;
    			if (h instanceof Ext.layout.container.boxOverflow.Menu && h.menuTrigger) {
    				h = h.menuTrigger;
    				result.push(h);
    				if (deep && h.getRefItems) {
    					result.push.apply(result, h.getRefItems(true));
    				}
    			}
    		}
    		return result;
    	}
    });
    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Win7 Enterprise x64 SP1
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Nice catch. This is actually being refactored slightly for 4.1.0 so I will make sure it gets addressed there
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    dfilkovi is on a distinguished road

      0  

    Default


    I can confirm this is still an active bug in 4.1.1 RC1

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2009
    Posts
    16
    Vote Rating
    1
    mdb is on a distinguished road

      0  

    Default


    It has been a year since this bug was found and it seems that it isn't solved yet. Any updates or workarounds?

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    One workaround would be to put same function on "button click" and "menuitem click", but that means that you will always have to put both listeners which is kind of silly.

    Other thing you could do is this:

    Code:
    //fix for controller bug in which buttons become menus in overflow and are not working
            if(Ext.app.EventBus)
            {
                Ext.override(Ext.app.EventBus, 
                {
                    dispatch: function(ev, target, args) {
                       var bus = this.bus,
                          selectors = bus[ev],
                          selector, controllers, id, events, event, i, ln;
    
        
    
                       if (selectors) {
                           
                          // Loop over all the selectors that are bound to this event
                          for (selector in selectors) {
                             // Check if the target matches the selector
                             selectorNew = 'youshallnotpassthisselector';
                            if(selector.indexOf("button") != -1) selectorNew = selector.replace('button', 'menuitem');
                             if (selectors.hasOwnProperty(selector) && (target.is(selector) || target.is(selectorNew))) {
                                 // Loop over all the controllers that are bound to this selector
                                 controllers = selectors[selector];
                                 for (id in controllers) {
    
                                     if (controllers.hasOwnProperty(id)) {
    
                                         // Loop over all the events that are bound to this selector on this controller
                                         events = controllers[id];
    
                                         for (i = 0, ln = events.length; i < ln; i++) {
                                             event = events[i];
                                             // Fire the event!
                                             if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) {
                                                 return false;
                                             }
                                         }
                                     }
                                 }
                             }
                          }
                       }
                       return true;
                    }
                });
            }
    Put this in you app.js this will override it, but it's a temporary solution cause it could cause issues in some rare cases.

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2009
    Posts
    16
    Vote Rating
    1
    mdb is on a distinguished road

      0  

    Default


    Thanks for your reply. The point is that even 'menuitem click' is not working.(so your workaround doesn't work)

    I used these controls:

    PHP Code:
    groupList button[action=delete
    (this is the normal button) Works ok.
    PHP Code:
    groupList menuitem[action=delete
    (this should be the overflow button) Doesn't work
    PHP Code:
    groupList menuitem 
    (fire event for every menu item) Doesn't work either.

    Looks like the controller can't see the events of the items in the overflow menu... Any solution to that?

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2012
    Posts
    7
    Vote Rating
    1
    hemp is on a distinguished road

      1  

    Default


    Bump. I'm still seeing this occur in 4.2

  8. #8
    Sencha User
    Join Date
    Sep 2007
    Posts
    91
    Vote Rating
    2
    tm8747a is on a distinguished road

      0  

    Default


    This is the override I'm using the fix this problem. I doubt it's a flawless solution, but it's working for me as far as I can tell.

    Code:
    Ext.define('overrides.layout.container.boxOverflow.Menu', {
        override: 'Ext.layout.container.boxOverflow.Menu',
    
        createMenuConfig: function(component, hideOnClick) {
            var config = this.callParent(arguments);
            Ext.copyTo(config, component, ['itemId']);
    
            return config;
        }
    });
    What this does is re-add the itemId that gets removed from the button when it gets added to the overflow menu. If your problem is that you had an event handler based on an itemId that wasn't firing, there's a good chance this could work for you.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."