Page 2 of 2 FirstFirst 12
Results 11 to 12 of 12

Thread: Catching bubbled events in controllers

  1. #11
    Sencha Premium User lorezyra's Avatar
    Join Date
    Dec 2007
    Japan -- 千葉
    Vote Rating


    for application wide events, use

    PHP Code:
    this.application.on({ //handle system-application wide events and calls here!!
    this.control() is used only for the local controller. If you want the event bubbled up to the application level use this.application.on()
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    And here are my terms...

    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.

    Simple. Enjoy.

  2. #12
    Sencha User
    Join Date
    Jan 2012
    Vote Rating


    The problem here is that <controller>.control() uses to inject the <component>.fireEvent() to catch events and this mechanism does not process the bubbled events.
    I include here my way to resolve this problem. It overrides the method to catch both original events and bubbled events. This way, you can catch component events from its parents or its ancestors. One thing to remember is that this will only process original events and events that are enabled to bubble (set by enableBubble() method or bubbleEvents config).
    Ext.define('', {
        override: '',
        dispatch: function(ev, target, args) {
            var bus = this.bus,
                selectors = bus[ev],
                selector, controllers, id, i, ln,
                events =,
                event = events && events[ev],
                bubbles = event && event.bubble;
            if (selectors) {
                // Loop over all the selectors that are bound to this event
                for (selector in selectors) {
                    // Check if the target matches the selector
                    // if(
                    if (this.isSelectorTarget(target, selector, bubbles)) {
                        // Loop over all the controllers that are bound to this selector
                        controllers = selectors[selector];
                        for (id in controllers) {
                            // 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 (,, 1)) === false) {
                                    return false;
        isSelectorTarget: function(target, selector, bubbles) {
            do {
                    return true;
            } while (bubbles && (target = target.getBubbleParent()));
            return false;

Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts