LeslieM
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:
ext
css used:
only default ext-all.css
Browser versions tested against:
Chrome 4.0.249.78 beta (36714)
IE8 (8.0.7600.16385)
FF3.6 (Firebug 1.6X.0a4 installed)
Operating System:
Windows 7 Professional
Description:
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:
<html>
<head>
<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() {
Ext.QuickTips.init();
var sourceTabPanel = new Ext.TabPanel({
renderTo: 'tabDiv'
,layoutOnTabChange: true
,items: // [],
[{
title:'Initial tab'
,html:'Logic works until removeALL() provided initial item is present'
}]
,tbar:[{
text:'Add Tab'
,handler:function() {
sourceTabPanel.add({
title:'New tab'
,html:'New tab content'
});}
},{
text:'Remove all tabs'
,handler:function() {
sourceTabPanel.removeAll();
sourceTabPanel.add({
title:'New first tab'
,html:'No tab contents appear after removeAll'
});
tp.setActiveTab(tp.items.first());
tp.doLayout(false,true);
}
}
]
});
/****
var win = new Ext.Window({
renderTo: Ext.getBody()
,width:600
,height:375
,layout:'fit' // This is required, if omitted we get the same behaviour!
,items:[sourceTabPanel]
});
win.show();
*****/
}); // eo function onReady
// eof
</script>
<title>Dynamically Adding Tabs by Saki - with add remove and into a div instead of window</title>
</head>
<body>
Test Add / Remove tab items into a div instead of window
<div id="tabDiv"></div>
</body>
</html>
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
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:
ext
css used:
only default ext-all.css
Browser versions tested against:
Chrome 4.0.249.78 beta (36714)
IE8 (8.0.7600.16385)
FF3.6 (Firebug 1.6X.0a4 installed)
Operating System:
Windows 7 Professional
Description:
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:
<html>
<head>
<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() {
Ext.QuickTips.init();
var sourceTabPanel = new Ext.TabPanel({
renderTo: 'tabDiv'
,layoutOnTabChange: true
,items: // [],
[{
title:'Initial tab'
,html:'Logic works until removeALL() provided initial item is present'
}]
,tbar:[{
text:'Add Tab'
,handler:function() {
sourceTabPanel.add({
title:'New tab'
,html:'New tab content'
});}
},{
text:'Remove all tabs'
,handler:function() {
sourceTabPanel.removeAll();
sourceTabPanel.add({
title:'New first tab'
,html:'No tab contents appear after removeAll'
});
tp.setActiveTab(tp.items.first());
tp.doLayout(false,true);
}
}
]
});
/****
var win = new Ext.Window({
renderTo: Ext.getBody()
,width:600
,height:375
,layout:'fit' // This is required, if omitted we get the same behaviour!
,items:[sourceTabPanel]
});
win.show();
*****/
}); // eo function onReady
// eof
</script>
<title>Dynamically Adding Tabs by Saki - with add remove and into a div instead of window</title>
</head>
<body>
Test Add / Remove tab items into a div instead of window
<div id="tabDiv"></div>
</body>
</html>
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