Panel initially hidden doesn't show toolbar when shown

Printable View

Apr 13, 2011, 7:09 PM
paul-2011

Panel initially hidden doesn't show toolbar when shown

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

Code:

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

Panel:

Code:

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

Code to show the hidden tab:

Code:

TabPanelContactDetails.AddScript("#{TabPanelContactDetails}.closeTab('tabHome'); #{TabPanelContactDetails}.setActiveTab(0);");
Apr 13, 2011, 8:04 PM
paul-2011

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
Apr 13, 2011, 8:13 PM
Daniil

Hi,

Please set HideMode="Offsets" for hidden tabs.
Apr 13, 2011, 8:31 PM
paul-2011

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.
Apr 13, 2011, 8:45 PM
paul-2011

Code:

<%@ 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"> <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>
Apr 13, 2011, 8:46 PM
paul-2011

notice on my sample how the toolbars are gone after hiding/showing, same happens with the items inside the Panel when you add them
Apr 14, 2011, 3:50 PM
Daniil

Quote:

Originally Posted by paul-2011

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/doc...ember=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
Apr 14, 2011, 4:15 PM
paul-2011

Daniil, you are a GENIUS, thank you very very much, I spent more than 2 weeks on this!
Cheers,
Paul

The winner is...

Code:

2. Add LayoutOnTabChange="true" for TabPanel
Apr 14, 2011, 4:20 PM
Daniil

Glad to help.

Please feel free to bump the thread if you fullfilled the requirements of
Forum Guidelines For Posting New Topics (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.