Card layout broken in my tab panel.

[geewhizbang]

I am trying to implement a card layout metaphor for this page. I want only one one of these items to display at a time (which is why I am using card layout) but I am getting behavior that doesn't work.



function BuildViewPort()
{
KnowledgeBase.PageTabs = new Ext.TabPanel
(
{
stateful: false,
autoDestroy: false,
border: false,
hideBorders: true,
plain:true,
region:'center',
items:
[
{
title: 'Knowledge Base',
itemId: 'searchTab',
autoLoad: '/kb/search',
listeners: { activate : function () { ShowSearch('divSearch'); } }
},{
title: 'Forum',
itemId: 'forumTab',
autoLoad: '/kb/forum'
},{
title: 'Wiki',
itemId: 'wikiTab',
autoLoad: '/kb/Wiki',
listeners: { activate : function () { ShowSearch('divWiki'); } }
}
]
}
);
KnowledgeBase.PageViewPort = new Ext.Viewport
(
{
layout: 'border',
cls: 'SD_Body',
items:
[
{
region: 'north',
frame : false,
border: false,
autoHeight: true,
bodyStyle: 'background:transparent',
html:'<div id="header" class="SD_Title"><p><a href="">Web Software Help & Tutorial</a></p></div><div id="divPage"></div>'
},
KnowledgeBase.PageTabs
]
}
);
KnowledgeBase.PageTabs.setActiveTab("<% = PageTab %>");

KnowledgeBase.setTab = function(tabName)
{
KnowledgeBase.PageTabs.setActiveTab(tabName);
}
}

var ForumTab = KnowledgeBase.PageTabs.activeTab.body;
var ForumContainer = new Ext.Container
(
{
cls: 'SD_TabHeader',
renderTo: ForumTab,
height: 800,
layout: 'border',
items:
[
{
xtype: 'box',
region: 'north',
id: 'forumBar',
height:100,
cls: 'SD_TabHeaderBar',
html: 'yadda badda bing'
},{
region: 'center',
xtype: 'box',
activeItem: 'panelForumCat',
layout: 'card',
id: 'ForumBody',
defaults:
{
border:false
},
items:
[
{
id: 'panelForumCat',
html: 'Loading &hellip;',
autoShow: true
},{
id: 'panelForum',
html: 'Loading &hellip;'
},{
id: 'panelThread',
html: 'Loading &hellip;'
},{
id: 'panelPost',
html: 'Loading &hellip;'
}
]
},{
region: 'south',
height: 30,
id: 'ForumFooter',
cls: 'SD_TabHeaderContent'
}
]
}
);

function OpenForumCats()
{
//This line fails which doesn't make sense to me based on documentation
//commented out since it should be active anyway.
//KnowledgeBase.Forums.ForumBody.setActiveItem('panelForumCat');

//this line works AFAIK.
KnowledgeBase.Forums.ForumListStore.load();

//This line fails.
KnowledgeBase.Forums.gridForumCats.render(Ext.getCmp('panelForumCat'));

//never gets here of course:
KnowledgeBase.Forums.gridForumCats.show();
}