Destroying Ext Components inside a div element

Question

I have an Ext.Component which is rendered inside a div through the "renderTo" property. I don't have any other references to that component except the DOM element where it is rendered to.

If i now simply remove this element from the DOM the problem is that there will be elements which persist (i.e. Mask-Element with the class "x-mask").

Is it possible to remove and destroy all Ext.Components in a DIV in clean way so that no elements related to them will be left?

An alternative way would be first finding all Ext.Components rendered to this div and then removing them myself.

Answer 1

You need to (and you should always) destroy the component itself by calling destroy(); on component level. If you have the DOM element you will have access to the id. With that do

Ext.getCmp('cmpIdValue').destroy();

The Component should take care of destroying the DOM element and will in addition clean up any managed listeners.

Answer 2

If you really have no reference to the component (not even an id) you will need to inspect your DOM element's children if they belong to a component.

Example:

var childNodes = document.getElementById('your-dom-element').childNodes;
for (var i = childNodes.length-1, cmp; i >= 0; i--) {
    cmp = Ext.getCmp(childNodes[i].id);
    if (cmp) {
        cmp.destroy();
    }
}

ExtJS always provides an id for a component (if it is not specified by you, it will generate one) and uses it as the id attribute for the components underlying DOM element.

Therefore you can just go through your DOM elements (direct) child nodes and test if there is a component associated with the child node's id. If one is found, you can invoke the destroy, which will take care of destroying the component (and all child components) in the DOM.