Now available: memory leak patch for Ext 1.1.1

[tjstuart]

Hello All,

I've had a few requests for this and as I cannot attach files to Private Messages (maybe I'm blind??), I've created a thread here. Mods, remove this post if you feel this is inappropriate, incorrect, violates the license or whatever.

Attached is a patched version of ext-all-debug.js which fixes many of the leaks that exist with this library. Thanks to Jack Slocum for providing the original fixes which we ported to Ext 1.1.1.

We also had to add some extra custom fixes to TreeNode and TreeNodeUI which leaked massively (at least in the way we were using them).

This patched version is critical for anybody developing long-running dynamic widget-heavy applications. Without this patch (in a totally dynamic application where the user is expected to use the application for 5 hours plus) the browser would consume anywhere between 200-800MB (depending on usage). With the patch, the browser memory consumption tends to peak at around 100MB.

In your own code ie. application, custom widgets etc, you have to ensure you call 'removeAllListeners()' on rogue/orphan elements whom had event listeners attached eg. grid views' "scroller", "mainBody" etc.

Check the source for 'START MEMPATCH' and 'END MEMPATCH' comments.

PS. To use this patch in production you should obviously use JSBuilder to create the minified ext-all,js from the attached.

Regards,

tjstuart

[radustefan]

I have serious memory leak problems in ExtJs v2.1 with FF3.

Do you know if this patch is included in the public 2.1 version?

[tjstuart]

I'm not sure. We got the fixes from Jack out of the 2.x SVN trunk then ported to Ext 1.x. We then added some of our own fixes to the Tree components.

You might need to ask the Ext developers and refer to this post.

Cheers

[gkassyou]

That's awesome. We have a very heavy intesive GUI app and I'm hoping this patch will help with the memory leaks.

[gkassyou]

tried the patch but memory in FF2.0 was still increasing. Not sure what you mean with must removelisteners()? When and were are we to call that for grids, etc.

Thanks for your help

[tjstuart]

tried the patch but memory in FF2.0 was still increasing. Not sure what you mean with must removelisteners()? When and were are we to call that for grids, etc.

Thanks for your help

Was it increasing less? As I said in my original post, memory will increase to a point (for me it was approx 80-100MB then level off). The patch definitely works but you must do some of the destruction manually.

For example, in my custom grid component destroy() method:-



destroy : function() {
if (this.pagingToolbar) {this.pagingToolbar.destroy();}
if (this.contextToolbar) {this.contextToolbar.destroy();}
if (this.loadMask && (typeof this.loadMask.destroy == 'function')) {
this.loadMask.destroy();
}
this.grid.getView().scroller.removeAllListeners();
this.grid.getView().lockedBody.removeAllListeners();
this.grid.getView().mainBody.removeAllListeners();
this.grid.getView().mainHd.removeAllListeners();
this.grid.getView().lockedHd.removeAllListeners();

this.grid.destroy();
Figtree.FigWeb.Widget.Table.superclass.destroy.call(this);
}


You need to keep track of DOM elements that are rogue. Use some debug code to display a count of elements that remain in the EventManager then track them down manually (not easy) and removeAllListeners() explicitly.

Regards

[radustefan]

Do you know if I use ExtJs 2.1 and I still got memory leaks, do I have to remove listeners and destroy objects manually?

[tjstuart]

Do you know if I use ExtJs 2.1 and I still got memory leaks, do I have to remove listeners and destroy objects manually?

Unfortunately I'm not up to speed with the goings on with Ext 2.x. You should refer one of the Ext development team to this thread and perhaps they can answer your question.

[gkassyou]

our app opens new windows for each functionality. I guess we'll need to run a destroy function before calling the window.close() function when the user closes the window.

[radustefan]

Yes, I have detail windows opened for each record, that I close on OK calling window.close(). I'll try to call the destroy function there, I thought I don't have to control that kind of stuff. Thanks.

[gkassyou]

firefox 3 seems to run more efficient. Does anyone know if it clears the memory itself on window.close function.

[tjstuart]

firefox 3 seems to run more efficient. Does anyone know if it clears the memory itself on window.close function.

This is unlikely as Firefox windows/tabs share the same process.

[darkinhu]

Hello,
First, thanks to tjstuart for help developing the patch for 1.1.1 library's version that fixes the memory issues.‬
In the code below, if field named "sexo" lose focus, the listener begins to trigger mouse click ( mousedown ) events, including, duplicating this event in case of losing it's focus. It is valuable to note that this occurs only in trigger fields.‬
‪Hope you can help me,‬

‪Now, thank your attention‬

‪Arlington Rodrigues‬


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug-MEMPATCH.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
var x = 0;
var nome = new Ext.form.TextField({
allowBlank:false
});
nome.applyTo('nome');
var sexo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'sexo',
width: 120,
forceSelection: true,
listeners: {
blur: function(c)
{
console.log(x++);
}
}
});
var dtNascimento = new Ext.form.DateField({
allowBlank: false
});
dtNascimento.applyTo('dtNascimento');
nome.focus();
});
</script>
</head>
<body>
<form id="f1">
<input type="text" size="24" name="nome" id="nome" />
<select name="sexo" id="sexo">
<option value="0">Masculino</option>
<option value="1">Feminino</option>
</select>
<input type="text" size="10" value="03/08/03" name="dtNascimento" id="dtNascimento" />
</form>
</body>
</html>