What's New?

Panel initially hidden doesn't show toolbar when shown

  1. #1
    Apr 13, 2011, 7:09 PM

    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
    <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);");
  2. #2
    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
  3. #3
    Apr 13, 2011, 8:13 PM
    Hi,

    Please set HideMode="Offsets" for hidden tabs.
  4. #4
    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.
  5. #5
    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">

 
<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>
    Last edited by paul-2011; Apr 13, 2011 at 9:09 PM.
  6. #6
    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
  7. #7
    Apr 14, 2011, 3:50 PM
    Quote Originally Posted by paul-2011 View Post
    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
  8. #8
    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
  9. #9
    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 (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.

Similar Threads

  1. [CLOSED] Panel HTML property doesn't show JavaScript
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 20, 2011, 3:54 PM
  2. [CLOSED] [1.0] TabPanel show hidden Panel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 27, 2010, 4:24 PM
  3. [CLOSED] [1.0] GridPanel Scroll bar doesn't render initially when the gird is inside Card
    By chafikb in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 25, 2010, 12:00 PM
  4. [CLOSED] [1.0] Initially Hidden fields in CompositeField do not render properly on becoming visible
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 19, 2010, 5:00 AM
  5. CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden
    By drakaan in forum 1.x Help
    Replies: 3
    Last Post: Aug 21, 2009, 2:24 PM

Posting Permissions