Question

I have a simple tabpanel. I want to fetch currently active tab’s child components and destroy them and doLayout(). The following code won’t work:

Ext.getCmp('centertabpanel').getActiveTab().items.destroy();

Answer 1

One thing to keep in mind here is that tabs in TabPanel’s in ExtJS just need to be a BoxComponent in ExtJS 3 or a Component in ExtJS 4. This means that tabs are not required to hold children elements. However, if you know that your centertabpanel has tabs with Containers, then you have two options:

If your tab is a container that has autoDestroy set to true (that is the default), then just use:

    Ext.getCmp('centertabpanel').getActiveTab().removeAll();

If you want to set autoDestroy to false, then use the following code:

    Ext.getCmp('centertabpanel').getActiveTab().each(function(item, idx, len) {
        item.destroy();
    });

.each() is defined on MixedCollection. It will execute the function in the first parameter against all of the child items, in order. As a side note, if you return false inside the function, then it will stop all iteration of elements.