Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    35
    Vote Rating
    0
    JamaSoftware-Sencha is on a distinguished road

      0  

    Default Memory leak with 'mousewheel' event (via TabPanel.enableTabScroll)

    Memory leak with 'mousewheel' event (via TabPanel.enableTabScroll)


    Hey there Sencha,

    We've been using Chrome Developer Tools to find memory leaks, and I've found one in Ext.EventManager.addListener:

    Code:
            ...
            
            if(el.addEventListener && ename == "mousewheel"){
                var args = ["DOMMouseScroll", wrap, false];
                el.addEventListener.apply(el, args);
                Ext.EventManager.addListener(WINDOW, 'unload', function(){
                    el.removeEventListener.apply(el, args);
                });
            }
            
            ...
    The part that adds the window.unload is the offender. The args array is referenced inside that anonymous function, and holds a reference to the wrap, which holds a reference to the scope, which in the case of TabPanel.enableTabScroll is the entire tab itself. Since window.onunload doesn't happen while browsing around my app, this reference never gets removed.

    Bottom line, my tabs are never being cleaned up.

    Commenting out the addListener for the window frees up a bunch of memory in my application after opening and closing some tabs.

    Unfortunately, I can't fix this with an override since this method is private. Are you familiar with this leak, and is there a better way to fix it than to change ext-all.js?

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    35
    Vote Rating
    0
    JamaSoftware-Sencha is on a distinguished road

      0  

    Default


    This doesn't fix other "mousewheel" events, but our application is tab-scrolling heavy, so this override saves us quite a bit of memory:



    Code:
    Ext.override(Ext.TabPanel, {
    
    
        initEvents : function(){
            Ext.TabPanel.superclass.initEvents.call(this);
            this.mon(this.strip, {
                scope: this,
                mousedown: this.onStripMouseDown,
                contextmenu: this.onStripContextMenu
            });
    //        if(this.enableTabScroll){
    //            this.mon(this.strip, 'mousewheel', this.onWheel, this);
    //        }
        }
        
    });
    Basically just ignoring mouse wheel events for the tab strip. This takes away the ability to use the mouse wheel to scroll the tab strip, but I never even knew you could do that anyway