View Full Version : Memory leak with 'mousewheel' event (via TabPanel.enableTabScroll)

2 Nov 2012, 12:02 PM
Hey there Sencha,

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


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 Nov 2012, 1:07 PM
This doesn't fix other "mousewheel" events, but our application is tab-scrolling heavy, so this override saves us quite a bit of memory:

Ext.override(Ext.TabPanel, {

initEvents : function(){
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 :)