View Full Version : ExtJs 4.1: Destroy components on closing a dynamically created tab

10 Apr 2014, 5:02 AM
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,
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) {
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'


beforerender: function(thisa, eOpts ){


/*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 ... ]

Now this is what happens:
Open Tab (Name - Query Builder)
Code reaches the beforerender listener.
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has only one object inside it.
Everything works fine.
Now the problem starts
Close the tab
Code reaches beforeclose listener. Trying tab.removeAll() and tab.destroy()
Reopen tab - Query Builder
Code reaches beforerender listener.
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?