PDA

View Full Version : How to show hidden control correctly?



Ex_Soft
19 Mar 2010, 5:21 AM
<!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>
Tabs aren't shown.

[SOLVED]


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();
}
}