PDA

View Full Version : Panel initially hidden doesn't show toolbar when shown



paul-2011
Apr 13, 2011, 7:09 PM
Hi, I have a TabPanel with 5 tabs, one of them is hidden by default and all of them have a BottomBar, when I show the hidden tab (Panel) the BottomBar doesn't appear, is there a trick to get this working?
Thanks

TabPanel


<ext:TabPanel ID="TabPanelContactDetails" runat="server" Height="255" DeferredRender="true"...

Panel:


ext:Panel ID="tabHome" runat="server" Title="Home" Layout="Fit" Border="False" Hidden="false"...


Code to show the hidden tab:



TabPanelContactDetails.AddScript("#{TabPanelContactDetails}.closeTab('tabHome'); #{TabPanelContactDetails}.setActiveTab(0);");

paul-2011
Apr 13, 2011, 8:04 PM
I can post here a clean sample that works but on a page with other hundred controls it doesn't work, sometimes the tab shows but it's empty, sometime it shows and the controls are messed up and the list goes on, can you please just tell me if there is a simple way of hidding and showing tabs that it's not so buggy when there are a lot of controls on the page?
Thank you

Daniil
Apr 13, 2011, 8:13 PM
Hi,

Please set HideMode="Offsets" for hidden tabs.

paul-2011
Apr 13, 2011, 8:31 PM
The Javascript function is called "closeTab" and not "hideTab", is that correct? It's still not behaving, some tabs after hiding don't come back using addTab and some tabs after hiding show up blank after using addTab.

paul-2011
Apr 13, 2011, 8:45 PM
<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext"
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script)


<script
(http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script)

runat="server">


protected void Button1_Click(object sender, DirectEventArgs e)


{


TabPanel1.AddScript("#{TabPanel1}.closeTab('Panel1');");


TabPanel1.AddScript("#{TabPanel1}.closeTab('Panel3');");


TabPanel1.AddScript("#{TabPanel1}.addTab('Panel2', 1); ");


X.Msg.Notify("Notification", "Tab shown.").Show();


}


protected void Button2_Click(object sender, DirectEventArgs e)


{


TabPanel1.AddScript("#{TabPanel1}.closeTab('Panel2'); ");


TabPanel1.AddScript("#{TabPanel1}.addTab('Panel1');");


TabPanel1.AddScript("#{TabPanel1}.addTab('Panel3');");


X.Msg.Notify("Notification", "Tab hidden.").Show();


}


</script>


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title></title>


</head>


<body>


<form id="form1" runat="server">


<ext:ResourceManager ID="ResourceManager1" runat="server">


</ext:ResourceManager>


<ext:Button ID="Button1" runat="server" Text="Show Tab2 and hide
1,3">


<DirectEvents>


<Click OnEvent="Button1_Click">


<EventMask ShowMask="true" MinDelay="150" />


</Click>


</DirectEvents>


</ext:Button>


<ext:Button ID="Button2" runat="server" Text="Hide Tab 2 and show 1,
3">


<DirectEvents>


<Click OnEvent="Button2_Click">


<EventMask ShowMask="true" MinDelay="150" />


</Click>


</DirectEvents>


</ext:Button>


<br />


<ext:TabPanel ID="TabPanel1" runat="server" Height="300">


<Items>


<ext:Panel ID="Panel1" runat="server" Title="Tab 1"
CloseAction="Hide" HideMode="Offsets">


<Items>


<ext:Label ID="Label1" runat="server" Text="TAB
1">


</ext:Label>


</Items>


<BottomBar>


<ext:Toolbar ID="Toolbar" runat="server">


<Items>


<ext:Button ID="ButtonSave" runat="server"
Icon="Disk" Text="Save Tab 1">


</ext:Button>


</Items>


</ext:Toolbar>


</BottomBar>


</ext:Panel>


<ext:Panel ID="Panel2" runat="server" Title="Tab 2"
Hidden="true" CloseAction="Hide" HideMode="Offsets">


<Items>


<ext:Label ID="Label2" runat="server" Text="TAB
2">


</ext:Label>


</Items>


<BottomBar>


<ext:Toolbar ID="Toolbar2" runat="server">


<Items>


<ext:Button ID="Button4" runat="server"
Icon="Disk" Text="Save Tab 2">


</ext:Button>


</Items>


</ext:Toolbar>


</BottomBar>


</ext:Panel>


<ext:Panel ID="Panel3" runat="server" Title="Tab 3"
CloseAction="Hide" HideMode="Offsets">


<Items>


<ext:Label ID="Label3" runat="server" Text="TAB
3">


</ext:Label>


</Items>


<BottomBar>


<ext:Toolbar ID="Toolbar1" runat="server">


<Items>


<ext:Button ID="Button3" runat="server"
Icon="Disk" Text="Save Tab 3">


</ext:Button>


</Items>


</ext:Toolbar>


</BottomBar>


</ext:Panel>


</Items>


</ext:TabPanel>


</form>


</body>


</html>

paul-2011
Apr 13, 2011, 8:46 PM
notice on my sample how the toolbars are gone after hiding/showing, same happens with the items inside the Panel when you add them

Daniil
Apr 14, 2011, 3:50 PM
The Javascript function is called "closeTab" and not "hideTab", is that correct? It's still not behaving, some tabs after hiding don't come back using addTab and some tabs after hiding show up blank after using addTab.

Not really. More info about HideMode:
http://dev.sencha.com/deploy/dev/docs/?class=Ext.Component&member=hideMode

But, really, it doesn't help in your case and, even, makes things worse.

Well, I misunderstood how all is configured on your page, so, please for the sample.

To fix:

1. Remove HideMode="Offsets" for all tabs.
2. Add LayoutOnTabChange="true" for TabPanel

paul-2011
Apr 14, 2011, 4:15 PM
Daniil, you are a GENIUS, thank you very very much, I spent more than 2 weeks on this!
Cheers,
Paul

The winner is...


2. Add LayoutOnTabChange="true" for TabPanel

Daniil
Apr 14, 2011, 4:20 PM
Glad to help.

Please feel free to bump the thread if you fullfilled the requirements of
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440) (we really prefer a simplified test sample which we can copy/past and run without any changes, and, sure, see the issue).

Please note how quickly you got a solution when posted the full sample to reproduce the problem.