Ext.form.Form Destroy

[Richard]

Hi all,

How can a Ext.form.Form be destroyed so that it can be replaced by another.

ie. use 1 div to host a varying number of forms uploaded by the server

I need to replace forms depending on something the user selects.

Thanks in advance

[code_berzerker]

Currently I have quite similar problem. Well I know how to destroy the html content (eg. when using jQuery: $('#container-center').html("")), but since I want my app to run well and clean I'd like to find a way to remove also JS objects associated with forms/layouts. And I'd like to do it the right way. I understand that nullyfing object might not be enough, because there might be some internal references left inside Ext and also most probably there still might be some event listeners watching that objects or html content. I believe that it would be beter to remove all that dependants before destroying JS objects and then removing html code. (removing only html gives me some nasty errors in IE 6.x, while it works without problem in FF).

The question is how to do it nice and clean?

Ok lets make this post even larger :)

I dynamicly insert html code into my 'container-center' div.
I create data store with httpproxy.
I create column model.
I create data grid using above.
I add toolbar to the head of grid.
I add paging toolbar at foot of grid.
Now I know that these objects store some references to each other and also register listeners to some events related to some of these objects.

Now how to nicely destroy all that stuff?

PS. If theres such need I can suply the code for building above.

Anyway I'd greatly appreciate helo on that matter. Thx.

[code_berzerker]

I have come up with following idea - class which collects destructors for components:

[CODE]
function ObjRecycling()
{
this.destructors = new Array();
}

ObjRecycling.prototype.add = function(destr)
{
this.destructors.push(destr);
}

ObjRecycling.prototype.destroyAll = function()
{
for(var i in this.destructors)
this.destructors[i]();

this.destructors = new Array();
}



centerDestroyer = new ObjRecycling();

// sample component init function:
function buildPagingGrid()
{
$('#container-center').html('\
<div id="container-grid-main">\
<div style="width:694px;" class="x-box-blue">\
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>\
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">\
<h3 style="margin-bottom:5px;">Lista użytkownik

[code_berzerker]

Finally I've made it to work in IE too:



function destroyPagingGrid()
{
grid.purgeListeners();
cm.purgeListeners();
ds.purgeListeners();
paging = null;
gridFoot = null;
tb = null;
gridHead = null;
grid.destroy(true);
grid = null;
cm = null;
ds = null;
}

[exo]

I'm curious to this, does it actually help? Memory wise?

[code_berzerker]

I'm not an expert but I guess that resources stay in memory of browser unless we free them and as I read somewhere its done by nullifying references to objects. Some objects seem to be very complicated (data grid) and thats probably the reason why developers suplied 'destroy' method for them and that indicates that we should use it. Also If I use some of the same variable names later there might be some conflicts if I don't clean up. So I prefer to do it right :)

Anyway - thats only my humble opinion.

[jack.slocum]

For form, something like this could help as well:

Ext.destroy.apply(Ext, form.items.items);

This will destroy all the form fields.

[code_berzerker]

Thx for tip :)

I went through sources to understand how it does work. And again it taught me something about the insides of Ext and JS itself.

Now to work ... curiosity of how things work is the enemy of meeting deadlines :P





EDIT: I tried to use this code in my app, but instead of destroying the form it prevented (with no error) destruction (my previous removing code which executes after this magic line did not work as before) ...