invisible tree

[notjoshing]

In IE I'm encountering some odd behavior with a tree. The tree is inside a nested architecture: a TabPanel contains a BorderLayout, which contains a ContentPanel, which contains the tree. When I change tabs, and go to the tree, the tree is invisible. The ContentPanel and its title are visible, and the TreePanel is still there; if I click on where the tree should be, it shows up. Also, if I activate the tab programmatically, the tree shows up.

None of this behavior shows up in Firefox. Which, of course, most of my users do not use.

Any suggestions as to what I may be doing wrong would be appreciated.

Here's the HTML for the tabs:


<div id="tabs1" class="tabData">
<div id="tabData_0">Some tab content.</div>
<div id="tabData_1">
<script type="text/javascript" src="js/tab.js"></script>
<div id="layout">
<div id="collections"></div>
</div>
</div>
</div>

Here's the JS creating the tabs:


var Tabs = function() {
var tabs;
return {
init: function() {
tabs = new Ext.TabPanel('tabs1');
tabs.addTab('tabData_0', "Some content");
tabs.addTab('tabData_1', "Tree.");
tabs.activate('tabData_1');
},
activate: function(myTab) {
if( !tabs ) { this.init(); }
myTab |= 0;
document.protocol['activeTab'].value=myTab;
tabs.activate('tabData_'+myTab);
}
};
}();
Ext.EventManager.onDocumentReady(Tabs.init, Tabs, true);

Here's the JS creating the tree, trimmed for inclusion here:


var CollectionSchedule = function(){
// shorthand
return {
init : function(){
////////////
// Quick tips
Ext.QuickTips.init();
////////////
// Layout
var layout = new Ext.BorderLayout('layout', {
west: {
initialSize:'99.8%',
split:true,
titlebar:true
}
});
////////////
// Collections
layout.add(
'west',
new Ext.ContentPanel(
'collections',
{
title:'Collection Schedule',
fitToFrame:true,
autoScroll:true,
autoCreate:true,
resizeEl:'collections'
}
)
);
////////////
// Tree
tree = new xt.TreePanel(
'collections',
{
animate:true,
enableDrag:true,
containerScroll: true,
rootVisible:false
}
);
var root = new xt.TreeNode({
text: 'Collections',
allowDrag:false,
allowDrop:false,
noDelete: true
});
tree.setRootNode(root);
/* Cut: adding a bunch of nodes. */
// render tree
tree.render();
expandAll()
}
};
}();
Ext.EventManager.onDocumentReady(CollectionSchedule.init, CollectionSchedule, true);


Thanks in advance.

Josh