View Full Version : Tab panel's weird behavior

7 Aug 2009, 12:56 PM
I have some trouble with TabPanel. I'm not sure am I doing it wrong or I get on a bug.
I searched forum, viewed examples, but I'm stuck. I have Tab panel and some other panels.
One panel is always visible while others are dynamically added and removed.

var tabMain = new Ext.Panel({
title: 'Start page',
layout: 'fit',
border: false,
margins: '2 2 2 2',
items: {
border: false,
margins: '2 2 2 2',
autoLoad: {url: 'welcome.html'}

var centerPanel=new Ext.TabPanel({
title: 'Administrative Panel',
autoDestroy: false,
enableTabScroll: true,
margins: '5 0 5 5', // top, right, bottom, left
border: true,
items: [tabMain],
activeTab: 0,
tabPosition: 'top'

File welcome.html is stripped with no html, body or meta tags. Pure text with no links. And I have some other panels each defined as fallows:

TabGeneral = new Ext.Panel({
title: 'General',
closable: true,
layout: 'fit',
autoLoad: 'general.php'

Tab panel is in center of a viewport and on the west is tree with these code snippet:

click: function(node, e){
if (node.id == 1){
centerPanel.add(TabGeneral );

Everything is working as expected, but sometimes when I close one tab, its content is replacing content in all other tabs, even one I add later. Only thing I can do is to refresh page which is out of question. I have this problem on various browsers and opertiong systems.

I'll put here how I understand it works and correct me if I am wrong:
When panel needs to be rendered for first time ext creates DIV tag and gives it a unique id. Then it makes it visible by adjusting its offset properties.
When user closes panel, DIV tag is removed from visible area, again by adjusting its offset properties, and DIV tag of another tab is then shown.
By putting autoDestroy to false in config of the TabPanel I prevent DIV tag from being
removed from DOM on tab closure.

Any help would help :D