1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default Unanswered: Catching bubbled events in controllers

    Unanswered: Catching bubbled events in controllers


    I have a setup where I am bubbling events that I'd like to catch in my controller. I have something like this

    Code:
    this.control({
                'mypanel': {
                    customevent : function(cmp){...}
    where the customevent is bubbled up from a subcomponent of mypanel, but this doesn't get caught in the controller. If I do this

    Code:
    this.control({
                'mypanel > subpanel': {
                    customevent : function(cmp){...}
    it works fine. Also if I just add some listeners to make sure things are firing properly by doing
    Code:
    var myPanel = Ext.create('mypanel', {
      listeners : {
        customevent : function(){
           alert('boo');
        }
      }
    });
    I see the method being called. Should this work?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I personally would go with 'mypanel > subpanel' or 'mypanel subpanel'. The event is firing only on the subpanel but bubbleEvents walks up the hierarchy to see if it has a listener.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default


    hmm....so the problem is I don't know the type of the components that are being added, they are driven by dynamically created menu items. Does the component query support all sub classes? So if I said panel and my custom component was a subclass of panel would that work?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by jej2003 View Post
    hmm....so the problem is I don't know the type of the components that are being added, they are driven by dynamically created menu items. Does the component query support all sub classes? So if I said panel and my custom component was a subclass of panel would that work?
    Yes it will.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    104
    Vote Rating
    0
    jej2003 is on a distinguished road

      0  

    Default


    nevermind, had a dumb problem, looks like it works perfectly, thanks Mitchell

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    pao is on a distinguished road

      0  

    Default


    Then, this code works?

    Code:
    this.control({           
     'mypanel': {              
        customevent : function(cmp){...}
    ...
    I have same problem, listeners don't catch bubbled events.

    Any suggestion?

  7. #7
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    638
    Vote Rating
    18
    Answers
    9
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default my example

    my example


    check out the code I posted here to see how it works...

    http://www.sencha.com/forum/showthre...Bugs-Accordian
    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.

  8. #8
    Sencha User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    pao is on a distinguished road

      0  

    Default


    Sorry but i cannot see any bubbled event fired in your code.

    My controller define this listener:

    Code:
    this.control({
      'mypanel' : {
         customevent : function(){...}
    }
    ...
    My panel has a child toolbar which contains a button. This button fires my customevent and bubbles up.

    Code:
    Ext.define('CustomToolbar' ,{
        extend: 'Ext.toolbar.Toolbar',
        alias : 'widget.customtoolbar',
     
        initComponent: function() {
          this.addEvents('customevent');
          this.enableBubble('customevent');
          
          // my button
          var mybutton = new Ext.Button({
              ...
              scope: this,
              handler : function(){
                this.fireEvent('customevent',this);
              }
              ...
          });
    ...
    But mypanel customevent handler never is called. If i use selector 'mypanel customtoolbar' then it works. But it's not a solution for me.

  9. #9
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    638
    Vote Rating
    18
    Answers
    9
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default


    I recommend that you read up on how to use the component query feature... Seems like you need to properly define the events (as I did in my example code).

    I suggest you read the API doc: http://docs.sencha.com/ext-js/4-0/#!...app.Controller
    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.

  10. #10
    Sencha User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    pao is on a distinguished road

      0  

    Default


    my idea is to define custom events in toolbar (createclient, editclient, deleteclient). These events are fired by toolbar buttons on click event:

    this.fireEvent('createclient',this)

    And i'd like these events were handled by panel container. Using 'mypanel customtoolbar' selector it works, i know. But i want bubble my custom events and simply use 'mypanel' selector in controller.

    Similar threads here, here and here

    Thanks!