Results 1 to 8 of 8

Thread: Want controllerB to listen to custom event fired from controllerA

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Vote Rating
    40
      0  

    Default Want controllerB to listen to custom event fired from controllerA

    Two of us have to trying to figure this out and it seems like it should be simple. We have controllerA that has a custom event 'showDevelopmentMenu' and does a fireEvent on it. Here is a simplified view of what we're doing.

    Code:
    
    Ext.define('Csg.controller.A', {
    
    
        extend: 'Ext.app.Controller',
    
    
        config: {
            bubbleEvents: [
                'showDevelopmentMenu'
            ]
        },
    
    
        init: function() {
            var me = this;
    
    
            me.control({
    
    
                'main #actionsButton': {
                    tap: me.onActionsButtonTap
                }
            });
        },
    
    
        onActionsButtonTap: function() {
            var me = this;
            me.fireEvent('showDevelopmentMenu');
        }
    });
    
    
    
    
    
    
    Ext.define('Csg.controller.B', {
    
    
        extend: 'Ext.app.Controller',
    
    
         init: function() {
            var me = this;
    
    
            me.control({
                showDevelopmentMenu: me.showDevelopmentMenu
    //            '*': {
    //                showDevelopmentMenu: me.showDevelopmentMenu
    //            }
            });
        },
    
    
        showDevelopmentMenu: function() {
            debugger;
        }
    });
    I know the simple would would be have controllerB do a this.control() on the button but we have reasons for not doing that. Since controllerA creates the view that has the button we want it to fire a custom event that controllerB is listening for. We can see controllerA firing the event but controllerB doesn't get it. We've tried all kinds of things with this.control().

    Any suggestions?

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Vote Rating
    40
      0  

    Default

    Well I got it to work but don't know if it's the preferred way. Had to add this to controllerA

    Code:
        getBubbleTarget: function() {
            return this.application;
        },
    and this to controllerB

    Code:
        init: function() {
            var me = this;
    
    
    //        me.control({
    //            'controller': {
    //                showDevelopmentMenu: me.showDevelopmentMenu
    //            }
    //        });
            me.application.on({
                showDevelopmentMenu: me.showDevelopmentMenu,
                scope: me
            });
        },
    Maybe me.control() only works for views?

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Vote Rating
    40
      1  

    Default

    Update:

    In controllerA we do
    Code:
    me.application.fireEvent('showDevelopmentMenu');
    In controllerB we do
    Code:
    me.application.on({            
    showDevelopmentMenu: me.showDevelopmentMenu,            
    scope: me        
    });
    Doing it this way you don't need to enableBubble and getBubbleTarget()

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
      0  

    Default

    this.application.fireEvent

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    -1
      0  

    Default

    This works great but I have one question. How do I pass data to listener:

    for example:

    me.application.fireEvent('showDevelopmentMenu', 'testData');

    Thanks!

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    628
    Vote Rating
    40
      1  

    Default

    me.application.fireEvent('event', dataA, dataB, dataC);

    onEvent: function(dataA, dataB, dataC);

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    -1
      0  

    Default I got it

    As soon as I posted I got it:

    Code:
    this.application.on({            
        popup: function(type){
              console.log('HERE IS THE TYPE' + type);				},           
    scope: this        
    			});

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    2
      1  

    Default

    FYI - It's now

    Code:
            var me = this;
            me.getApplication().on({
                loginSuccess : me.onLoggedIn,
                scope : me
            });
    And

    Code:
            var me = this;
            me.getApplication().fireEvent('loginSuccess');

Posting Permissions

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