Javascript-форум - Как правильно показать изначально скрытый контрол?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="ru">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
		<title>&laquo;Test Dynamic Tabs&raquo;</title>
		<link rel="stylesheet" type="text/css" href="../../../../ExtJS/resources/css/ext-all.css"/>
		<script type="text/javascript" charset="windows-1251" src="../../../../ExtJS/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" charset="windows-1251" src="../../../../ExtJS/ext-all-debug.js"></script>
		<script type="text/javascript">
Ext.onReady(function() {
	var
		viewport=new Ext.Viewport({
			layout: "border",
			renderTo: Ext.getBody(),
			items: [{
				region: "north",
				xtype: "toolbar",
				//autoHeight: true,
				height: 50,
				items: [{
					xtype: "tbspacer"
					}, {
					xtype: "button",
					text: "Test1",
					handler: function(btn){ DoIt(btn) }
					}, {
					xtype: "button",
					text: "Test2",
					handler: function(btn){ DoIt(btn) }
					}, {
					xtype: "button",
					text: "Test3",
					handler: function(btn){ DoIt(btn) }
					}, {
					xtype: "tbfill"
				}]
				}, {
				region: "center",
				xtype: "tabpanel",
				id: "TabPanel",
				hidden: true, // !!! <-- !!!
				tabPosition: "bottom"
			}]
		});
});

function DoIt(btn)
{
	var
		tabPanel,
		tab;
		
	if(!(tabPanel=Ext.getCmp("TabPanel")))
		return;

	if(!tabPanel.isVisible())
	{
		tabPanel.show();
		tabPanel.doLayout(); // !!! <-- !!!
		tabPanel.ownerCt.doLayout(); // !!! <-- !!!
	}
	
	if(!(tab=tabPanel.items.find(function(i){return i.title === btn.text;})))
		tab=tabPanel.add({title: btn.text, layout:'fit'});
	tabPanel.setActiveTab(tab); 	
}
		</script>
	</head>
	<body>
	</body>
</html>

Табы не показываются.

Поменял местами

function DoIt(btn)
{
	var
		tabPanel,
		tab;
		
	if(!(tabPanel=Ext.getCmp("TabPanel")))
		return;

	if(!(tab=tabPanel.items.find(function(i){return i.title === btn.text;})))
		tab=tabPanel.add({title: btn.text, layout:'fit'});
	tabPanel.setActiveTab(tab); 
	
	if(!tabPanel.isVisible())
	{
		tabPanel.show();
		tabPanel.ownerCt.doLayout();
	}
}

и зафунциклировало...