ExtJs 4.1: Destroy components on closing a dynamically created tab

Question

I am creating new ExtJs tabpanels and rendering panels inside it programmatically. The panels (rendered inside tabs) are all written in separate JS files.

Opening, rendering and closing of the tabs is working completely fine. But when I debug the code I see that the previous components of the closed tabs are still active in the memory. As a result of which the functioning of the components gets affected when the tab is reopened.

I want to destroy all the components inside the tab panels (if ExtJs, for some reasons, is not able to do it).

How can I do this?

Below is a sample code which I am trying:

Main Tab:

var tabs = new Ext.TabPanel({
    id : 'screensTabPanel',
    layout : 'fit',
    enableTabScroll : true,
    height : Ext.getBody().getStyleSize().height - 60,
    activeTab : 0,
    //enableTabScroll : true,
    autoScroll : true,
    autoRender : true,
    border : false,
    plugins : [ {
        ptype : 'tabscrollermenu',
        maxText : 30,
        pageSize : 5
    } ]
});

Dynamic Tab object:

var tabConfig = {
            title : text,
            bodyPadding : 3,
            closeAction:'destroy',
            autoScroll : true,
            id : 'tab' + id,
            closable : closable,
            loader : {
                loadMask : 'loading...',
                autoLoad : true,
                url : url,
                scripts : true,
                params : {
                    userId : 1
                },
            border : false,
            appId : appIdx,
            screenId : screenId,
            gridType : gridType,
            listeners : {
                beforeclose : function(tab) {
                    debugger;
                    tab.removeAll(); //I tried doing this
                    tab.destroy(); //I tried doing this as well
                    return true;
                }
            }
        };

Internal Panel code:

Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.panel.Panel',
itemId: 'qb-VisualSQLQueryBuilderId',
renderTo: Ext.Element.get('divQueryBuilder'),
layout: {
    type: 'border'
},
listeners:{
    beforerender: function(thisa, eOpts ){
        debugger;
        /*if(Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length > 1){
            Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[0].destroy();
        }*/
        Tab.MainTab = Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length - 1];
    }
},
items: [ .... screen components ... ]
});

Add Panel object to tab:

addedTab = ExtCont.add(tabConfig);
addedTab.show();
ExtCont.setActiveTab(addedTab);

Now this is what happens:

1. Open Tab (Name - Query Builder)
2. Code reaches the beforerender listener.
3. Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has only one object inside it.
4. Everything works fine.

Now the problem starts

1. Close the tab
2. Code reaches beforeclose listener. Trying tab.removeAll() and tab.destroy()
3. Reopen tab - Query Builder
4. Code reaches beforerender listener.
5. Now Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has two objects inside it. So it is retaining the object of the tab opened first time. And the second one is that of the tab opened just now.

How do I ensure whenever a tab is closed all its components get smoothly destroyed?

Answer 1

from TabPanel:

Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.

so it could really be an ExtJS Bug cause autoDestroy: true is default. maybe you could open a ticket.