Properly delete items inside a tabpanel extjs

Question

Im having a problem after opening and closing a tab several times. At first open and close, the form inside the tab panel renders okay, but once I do it several times, the application acts weird (grid cannot be edited anymore, etc) I think it might be because the components inside the tab is not properly destroyed. So am I doing the right way to destroy the components inside the tab? here is my code:

{
                region: 'center',
                xtype: 'tabpanel',
                flex: 1,
                border: true,
                id: 'modulePanel',
                ui: 'blue-tab',
                resizeTabs: true,
                autoDestroy: false,
                detachOnRemove: true,
                layout: 'fit',
                bodyPadding: 0,
                items: [

                ],
                listeners: {
                    remove: function(tp, c, e){
                        if(c && c.xtype == 'tab'){
                            c.destroy();
                            tp.remove(c);
                            pl.remove(pl.findRecord('id',c.initialConfig.card.tabid));
                            pl.commitChanges();
                            if(pl.getCount() == 1){
                                Ext.getCmp('menubar').toggleFullscreen(false,false);
                            }
                        }
                    },
.....

this is how I add items :

addTab: function(className, tabTitle, tabId){
    Ext.require(className);
    var modulePanel = this.getModulePanel();
    var module = Ext.create(className);
    var tab = modulePanel.add({
        title: tabTitle,
        xtype: 'panel',
        closable: true,
        tabid: tabId,
        border: true,
        items:[]
    });
    tab.add(module);
    modulePanel.setActiveTab(tab);
},

Answer 1

I dont know what happened but it works ok now. Somehow this framework is weird.