Destroying Widgets but Memory Usage Doesn't Decrease (With Code) [Archive]

Zac

5 Jun 2007, 6:08 PM

How can I reclaim the memory used by widgets after they aren't on screen anymore? I've tried calling destroy(true) on the dialogs which does remove the DOM elements but the memory usage doesn't change.

The example BasicDialog eats up about 2MB which is fine, but I need that 2MB back after I hit the close button (code calls destroy() when the dialog is hidden) because one of the more complex windows will be created and destroyed a lot within the user's session and the memory never gets freed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>



<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext-1.1-beta1/resources/images/default/s.gif';

function createDiv(parentElem, id) {
if(typeof(parentElem) == 'undefined')
parentElem = document.body;
if(typeof(id) == 'undefined')
id = Ext.id();

return Ext.DomHelper.append(parentElem, {tag: "div", id: id}, true);
};

TestApp = {};
TestApp.Application = function() {
this.searchWindow = null;
this.caseWindows = [];
};
Ext.extend(TestApp.Application, Ext.util.Observable, {
//private button handlers:
btnSearchCase: function(btn) {
if(!this.searchWindow)
this.searchWindow = new TestApp.SearchWindow({dialogTitle: 'test'});

if(!this.searchWindow.isVisible()) {
this.searchWindow.show();
} else {
this.searchWindow.toFront();
}
},

btnSearchCase2: function(btn) {
var tmp1 = new TestApp.SearchWindow();
tmp1.show();

this.caseWindows.push(tmp1);
},

init: function() {
var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 84
},
center: {
split: false
}
});

var topCP = new Ext.ContentPanel({autoCreate: true});
var centerCP = new Ext.ContentPanel({autoCreate: true});
centerCP.toolbar = new Ext.Toolbar(createDiv(centerCP.getEl()));

var mnuCases = new Ext.menu.Menu();
mnuCases.add({text: 'Search Case (only 1 allowed on screen at once)'}).on('click', this.btnSearchCase, this);
mnuCases.add({text: 'Search Case (allows multiple windows)'}).on('click', this.btnSearchCase2, this);

var tb = centerCP.getToolbar();
tb.add({
cls: 'x-btn-text',
text:'Test',
menu: mnuCases
});

layout.beginUpdate();
layout.add("north", topCP);
layout.add("center", centerCP);
layout.endUpdate();

Ext.DomHelper.applyStyles(topCP.getEl(), 'background-color: #eeeeec');
Ext.DomHelper.append(topCP.getEl(), {tag: 'img', src: 'imgs/logo-left.gif'});
}
});

TestApp.SearchWindow = function(config) {
Ext.apply(this, config);

if(!this.width)
this.width = 600;
if(!this.height)
this.height = 400;
if(!this.minWidth)
this.minWidth = 600;
if(!this.minHeight)
this.minHeight = 400;
if(!this.dialogTitle)
this.dialogTitle = 'Case Search';

this.dialog = null;

TestApp.SearchWindow.superclass.constructor.call(this);
};

Ext.extend(TestApp.SearchWindow, Ext.util.Observable, {
isVisible: function() {
if(!this.dialog)
return false;
return this.dialog.isVisible();
},
toFront: function() {
if(!this.dialog)
return false;
return this.dialog.toFront();
},
show: function() {
if(!this.dialog) {
this.dialog = new Ext.BasicDialog(Ext.id(), {
autoCreate: true,
title: this.dialogTitle,
collapsible:false,
resizeHandles:'se',
width: this.width,
height: this.height,
minWidth: this.minWidth,
minHeight: this.minHeight,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});

var dlgTabs = this.dialog.getTabs();
var tabSearch = dlgTabs.addTab(Ext.id(), 'Search Criteria', '', false);

Ext.form.Field.prototype.msgTarget = 'side';
var frmSearch = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'});

frmSearch.add(
new Ext.form.TextField({
fieldLabel: 'blah',
name: 'blah',
width:175
}),

new Ext.form.DateField({
fieldLabel: 'blah2',
name: 'blah2',
width:175
}));

frmSearch.addButton('Search', function(){
Ext.MessageBox.alert('Status', 'TODO: Search.');
});

tabSearch.bodyEl.setStyle('padding', '10px');
frmSearch.render(tabSearch.bodyEl);
tabSearch.show();

this.dialog.on('hide', function(dialog) { this.kill(); }, this);
}

this.dialog.show();
},

kill: function() {
try {
this.dialog.destroy(true);
this.dialog = null;
}catch(e) {
alert('Exception thrown! Message: ' + e.message);
}
}
});

var myApp = new TestApp.Application();
Ext.EventManager.onDocumentReady(myApp.init, myApp, true);
</script>
</head>
<body>
</body>
</html>

The above code could be a LOT shorter to explain this, but I wanted to leave the layout I'm using alone just incase it has any impact on the memory not getting freed.

Thanks!