1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    7
    Vote Rating
    0
    Tvaland is on a distinguished road

      0  

    Default DOM-like event bubbling on [component].ownerCt

    DOM-like event bubbling on [component].ownerCt


    In the html DOM, an event bubbles from the element the event originated on, up to the top of the DOM or vice versa, depending on the browser.

    Is this something you're considering/decided against in Ext, having events bubbling from a component, up all [component].ownerCt. When a component is added to another, all events in the new component is added to the "stack" of ownerCts.

    For me at least, this would make it easier to make more flexible/pluggable modules.

  2. #2
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    556
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      0  

    Default


    Support this, I think its intuitively excepted.

  3. #3
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    have a look at relayEvents: http://extjs.com/deploy/dev/docs/?cl...er=relayEvents
    It's no event-bubbling but I don't think that a default event-bubbling would make much sense.
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

  4. #4
    Ext User
    Join Date
    Aug 2007
    Posts
    5
    Vote Rating
    0
    bork is on a distinguished road

      0  

    Default


    I'd also like to see this.

    Just today, I've been frustrated trying to do something like this:

    - Viewport with border layout (west/center) (not that this matters)
    - Center panel contains a window that contains a grid with a tbar.
    - Grid's tbar contains a button for "Add Record"
    - The button's click handler produces another window with a form.

    Ideally, I don't want to tell my grid about the center panel a few levels up. I'd like the button click to emit an event that bubbles up to the center Panel, which consumes the event and creates the form-window.

    When the form gets saved, another event should fire, again getting caught by the center panel. The handler calls the grid's reload();

    Am I missing some obvious way to do this (that doesn't require the grid to know about the panel, nor the form about the grid?)

  5. #5
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    Hi Bork,

    problem with event bubbling is, that the event handler don't know from which component the event came from. Ext events don't have a getTarget() method or so to get the component which originated the event. Also it would be quite tedious to check the originating component in each and every event handler.

    This is how I would tackle your problem: Sub-class grid with a pre-configured class that adds a new event "addrecord". This event gets fired when the button is pressed. Some component up in the chain or your application logic listens to this event on the grid and if it gets fired this component creates and shows the form - also a pre-configured class with a new event "save" that the parent component listens to and the handler calls the reload() of the grid.

    Basically: Build components that are as self-contained as possible but logic that involves both, grid and form, has to be handled by a component that knows them both.

    PS: others have suggested PageBus in this forum for decoupling components - I for myself didn't found the need to use it but maybe it fits your needs and preferences.
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

  6. #6
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    556
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      0  

    Default


    Again, supporting this idea.

    Ext have an obvious lack of broadcasting capabilities for components to communicate between each other.

    Another example is
    - i have a popup login window in my app
    - i have several components which needs to be redrawn after users login.

    Seems very natural for login window to fire 'loggedin' event or smth and others components to handle it.
    It may be not strictly bubbling idea, near to broadcasting.
    For now it can be solved with "fireing" and "handling" events on 1 central component which assumes that all your plugins should know about it.
    Also subclassing for such basic tasks is not very practical.

    Would be great to see this capabilities in Ext 3.0

  7. #7
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Bubbling seems a bit narrow for what the OP is talking about. What about downstream components? Is it really desirable to propogate Application level events to all components?

    A pattern like this permits any Component to react to App-level events when subscribed to:

    Code:
    myAppClass = function(config){
      Ext.apply(this, config || {});
        this.addEvents(
            'login',
            'logout',
            'sessiontimeout'
        );
    };
    
    Ext.extend(myAppClass, Ext.util.Observable, {
        userId  : null,
        raiseLogin : function(userId){ this.fireEvent('login',this,this.userId); },
        raiseLogout: function(userId){ this.fireEvent('logout',this,this.userId); },
        raiseTimeout: function(userId){ this.fireEvent('sessiontimeout',this,this.userId); },
        init : function() { ........... }
    });
    myApp = new myAppClass();
    Ext.onReady(myApp.init, myApp);
    Then, any future component that cares about such events need only subscribe to these App-level events:

    Code:
       something.add ({
           xtype: 'form',
           handleLogin : function(App, user){},
           handleLogout : function(App,user){this.getForm().disable();  },
           handleTimeout : function(App,user){},
           listeners:{
                render: function(formPanel){
                     myApp.on({
                          login : this.handleLogin,
                          logout: this.handleLogout,
                          sessiontimeout : this.handleTimeout
                          scope : formPanel
                     });
    
                }
           },.......
      });
    Then, later:
    Code:
    myApp.raiseLogout();
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    556
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      0  

    Default


    Thats it - 1 central component caring about events. Very clean implementation, thanks )

    The question is - should it become ext built-in? (so anyone can write plugins based on such pattern). Though, it can be implemented as standalone extension and others extension may require it like pre-requisite )

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    IMHO: No.

    How would the framework know what App-specific events are relevant to your needs? What would it call them?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Sencha - Community Support Team SamuraiJack1's Avatar
    Join Date
    May 2008
    Posts
    556
    Vote Rating
    3
    SamuraiJack1 will become famous soon enough

      0  

    Default


    Well, framework should not know about App-specific events - it should grant the ability
    to use them if required. Think such pattern is very natural way of coding