View Full Version : [4.0.7] Remove + add tabs to tabpanel only works with one tab

20 Oct 2011, 11:22 AM

Ext version tested:
Ext 4.0.7-gpl

Browser versions tested against:
IE9 FF6 Chrome 13

Removing and adding the same component (tab) works as long as just one tab is inside the tabpanel. With two tabs the component isn't added and no exception is raised.

Steps to reproduce the problem:
Run the following code. The tab re-appears after clicking the button Remove the commented lines from the second tab.

The result that was expected:
Same behavior with one or more tabs available.

The result that occurs instead:
The first tab will not return after clicking the button

Test Case:

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-gpl/resources/css/ext-all.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady (function () {
var tabPanel = Ext.create ('Ext.tab.Panel', {
activeTab: 0,
renderTo: Ext.getBody (),
items: [{
title: 'Tab 1',
xtype: 'button',
text: 'Click me',
handler: function () {
var btn = this;
tabPanel.remove (btn, false);
// Remove from dom (not necessary)
btn.getEl ().dom.parentNode.removeChild (btn.getEl ().dom);
setTimeout (function () {
tabPanel.add (btn);
}, 1000);
, {
title: 'Tab 2',
html: 'Second tab'

23 Oct 2011, 1:27 PM
It seems that the added tab is not made visible. So, as a workaround a

listeners: {
add: function (panel, tab) {
tab.setVisible (true);

to the tabpane should work.