View Full Version : [CLOSED][3.x/2.3.0]TabPanel not rendering to DIV after removeAll / if items empty

8 Feb 2010, 3:16 PM
Ext version tested:

Ext 3.1.1 rev 3.1.1 rc
Ext 3.1 rev 0
Ext 3.0 rev 3
Ext 2.3 rev 0

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

Chrome beta (36714)
IE8 (8.0.7600.16385)
FF3.6 (Firebug 1.6X.0a4 installed)

Operating System:

Windows 7 Professional


My app has a tabpanel where I want to completely remove all existing items it and then add tabs back into. The tabpanel is rendered into a div.
The problem I encounter is that when I add the tabs after the removeAll(), they indeed show up as tabs - just as expected - , but no content is rendered!
I derived my test case from Saki's examples.
Things I know:
a) If I render the TabPanel inside a Window AND the window has the layout:'fit' config, then everything works as expected. If I render the tab panel inside a window without the layout:fit then the results are identical to what I see when I render to the DIV. This is probably a big clue as to what is wrong, but I don't know how to fix it!
b) If I created my TabPanel with no initial items, then when I add them later I also get the same results as if I had first done a removeAll. This is another clue - the problem must occur whenever the TabPanel has no items in it.
You can experiment by commenting out the renderTo and uncommenting the window logic. You can also change the tabpanel to start out with no items. The code "as-is" should let you create tabs and see their contents until you do a removeAll. After that you can add tabs, but no contents appear.

Test Case:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.extjs.com/deploy/ext-3.1.1-rc/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/ext-3.1.1-rc/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/ext-3.1.1-rc/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/images/s.gif'
Ext.onReady(function() {
var sourceTabPanel = new Ext.TabPanel({
renderTo: 'tabDiv'
,layoutOnTabChange: true
,items: // [],
title:'Initial tab'
,html:'Logic works until removeALL() provided initial item is present'
text:'Add Tab'
,handler:function() {
title:'New tab'
,html:'New tab content'
text:'Remove all tabs'
,handler:function() {
title:'New first tab'
,html:'No tab contents appear after removeAll'


var win = new Ext.Window({
renderTo: Ext.getBody()
,layout:'fit' // This is required, if omitted we get the same behaviour!

}); // eo function onReady

// eof

<title>Dynamically Adding Tabs by Saki - with add remove and into a div instead of window</title>
Test Add / Remove tab items into a div instead of window
<div id="tabDiv"></div>

Steps to reproduce the problem:

Run sample. Observe that Initial Tab has contents
Click "Add Tab" button. Observe that new tab has contents
Click "Remove all tabs" button. Observe that a new tab was created, but you can't see the contents (bug)
Click "Add Tab" button. Observe that new tab was created, but you can't see the contents (bug)

The result that was expected:

See contents of tabs created after the tabpanel is emptied

The result that occurs instead:

Can't see the tab panel contents

Debugging already done:

tried playing around with layoutOnTabChange, and switching the order of the setActiveTab and doLayout calls
tried using the tabpanel as an item in a window instead of rendering to a DIV - works just fine (provided layout:fit is set on the Window)!
tried creating a panel with no initial items, then adding them dynamically. Fails even though in this case I have not made a call to removeAll

8 Feb 2010, 3:28 PM
I assume it's just a typo, but your example doesn't run, because "tp" is undefined.

8 Feb 2010, 3:51 PM
You need to give the tab panel dimensions, otherwise it doesn't know how to size the child items.

8 Feb 2010, 4:09 PM
Sorry about the error in the submitted code! I was mucking around with it at the last minute and changed the name of the panel.

The code should not use "tp", instead should be "sourceTabPanel".

I don't understand the reply about how to size the content. The panel (it is a grid in my actual application code) displays just fine during the initial testing - until I remove all tabs. Isn't the doLayout supposed to recompute what is needed to render the component? It is certainly really confusing -- I spent 2+ days on this :-( -- to have the panel render OK at first, but then "disappear" after the tabs are removed.

At any rate, can you share an example of the code I need to add so Ext knows the size and how to render the tabpanel properly?


8 Feb 2010, 4:13 PM
Just specify a width and a height and everything will be fine. Note that the width and height can be supplied by a layout (say for example, a fit layout).

8 Feb 2010, 4:33 PM
Confirmed that adding width and height attributes to the tabpanel corrects the issue.

I don't think I can use layout:fit though, when rendering to a div. If I am missing something there, please let me know.

To help me avoid making a mistake like this in the future - would you mind explaining why this works initially until I empty out the tabpanel? It would have been easier for me to debug if it never rendered at all unless I had the size attributes set.

Thanks again...

9 Feb 2010, 6:49 PM
Additional note - adding the width and height to the tabpanel works, but setting the dimensions inside the DIV will not work. e.g. <div id="tabDiv" style="width:400px; height:600px; background-color:green; text-align:center;"</div>