Auto event listener cleanup

January 8th, 2009
  • Occasionally I will pass references to Observable objects around to other object that wish to observe events on them. For example, I will observe events on an Observable from within a Panel. The problem is, if the panel is closed the listener will remain unless you specifically clean it up in the panel's destroy function.

    I have made some patches that adds an additional option to listener configs, a src attribute that indicates the listener should be removed whenever this 'src' is destroyed. src must be an Ext.Component.

    This code is pretty messy (sorry).... and it uses prototype Enumerable functions. If you guys think this is a good idea, I will clean it up so its ready for actual implementation.

    Usage looks like this:

    object.on("someevent", function(){

    }, this, {
    src:this
    });

    when "this" is destroyed, the listener for someevent is automatically removed.

    (I removed my code here because its really a hack... this really needs to be implemented in the core code instead of attaching function interceptors and the like)


  • :s bump? Anyone...? good idea... bad idea? anything?


  • sounds good to me :)


  • Great! That is how the "src" worked actually. It just called "mon" for you.... src is just a shortcut really. Maybe you can add the "mon" to addListener so it does your call automatically... it seems a little verbose to have to do:

    yourObject.on('event', this.someFn, this);
    this.mon(yourObject, 'event', this.someFn, this);

    when you can do:

    yourObject.on('event', this.someFn, this, {mon:this});

    While I am at it... :-)... I also added a function "addDestroyable" to component so you can register other components that will have their destroy functions called when the parent component is destroyed.

    I did this in Ext 1.1 so please correct me if this situation no longer applies: The problem I was having in 1.1 was with certain "floating" (for lack of a better term) components like menu / drop downs / window. The html would not get cleaned up when a panel was closed. This is because the html for "floating" components existed outside of the panel html. So, I was getting memory leakage every time a panel was closed. Granted, the more efficient solution might be to reuse these components from some global scope between tabs but that really isn't ideal from a programming aesthetic standpoint. Plus I think you will get the same problem with grid editors which you cannot really do this with.

    I created the "addDestroyable" method as a really simple way to do memory management with components and you didn't have to think about it that much.


  • It's actually a little shorter. ;) The mon() call attaches the handler as well.

    yourObject.on('event', this.someFn, this); // not needed
    this.mon(yourObject, 'event', this.someFn, this);
    vs:
    yourObject.on('event', this.someFn, this, {mon:this});

    The key things in the decision was 2 fold.

    1) The "src" should not be responsible for cleaning up listener's event handlers. listener should clean up it's own mess on destruction.
    2) It is also supported for element listeners for more efficient garbage collection (the primary reason it was created). e.g.
    this.mon(this.someEl, 'click', this.onClick, this);


  • Check out recent 2.1 SVN code for the Component function mon(). It does it in a little different of a way (on the "src" instead of observed class). e.g.

    this.mon(yourObject, 'event', this.someFn, this);

    Using mon if this is destroyed, the listener is automatically removed.


  • Check out recent 2.1 SVN code for the Component function mon(). It does it in a little different of a way (on the "src" instead of observed class). e.g.

    this.mon(yourObject, 'event', this.someFn, this);

    Using mon if this is destroyed, the listener is automatically removed.

    is it experimental? it's currently only used by the Slider :-/







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Auto event listener cleanup , Please add it free.

    Posted in freedeadaim.com | edit