<!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>«Test Dynamic Tabs»</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();
}
}
и зафунциклировало...
