Does ExtJS automatically garbage collect components

Question

Imagine the following case, where I have the following HTML document:

<html>
    <head>... include all the js and css here...</head>
    <body>
        <div class="placeholderForExtPanel"></div>
    </body>
</html>

Now somewhere in my code, I tell ExtJS to render a panel in my placeholder.

var container = Ext.select('.placeholderForExtPanel');
Ext.create('Ext.form.Panel', {
    title: 'My Panel'
});

A bit later, some other part of the code decides to remove the placeholder div from the DOM.

Ext.select('.placeholderForExtPanel').first().remove();

In this case, what happens to the Panel that was declared before? Do I need to manually destroy it, or does ExtJS know that it's containing element was just removed from the DOM and it should destroy the Panel by itself? I'm using ExtJS 4.1.

matt matt · Accepted Answer · 2013-11-22T13:26:53

ExtJS will not destroy components automatically if you remove the containing element. The element will be removed from the DOM, but the panel keeps its reference to it. Try the following:

Ext.select('.placeholderForExtPanel').first().remove();
console.log(Ext.getCmp('panel-id').getEl().dom.parentNode); // assuming your panel's id is "panel-id"

The element still exists, and you could just append it to the DOM again if you wanted to:

document.body.appendChild(Ext.getCmp('panel-id').getEl().dom.parentNode);

(Side note: the fact that the panel keeps the reference to it's containing element also prevents the browser's garbage collector from destroying it)

Basically it works the other way around, the component manages its corresponding DOM elements, so when you destroy the component the DOM elements will be removed as well.

Furthermore, any components which can contain other components (i.e. Ext.container.Container and all of its subclasses) will destroy any of their child components when they are destroyed (assuming autoDestroy is enabled, which is the default).

So, if you want to automatically destroy all components which have been rendered to a certain element, just create that element as a container and you should be good:

var container = Ext.create('Ext.container.Container', {
    cls: 'placeholderForExtPanel',
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'panel',
        title: 'mypanel'
    }]
});

container.destroy(); // destroys the container AND the panel

Does ExtJS automatically garbage collect components

1 Answers