What's New?

[CLOSED] TabPanel tabs are not hiding

  1. #1
    Mar 31, 2011, 9:01 PM

    [CLOSED] TabPanel tabs are not hiding

    Hi,

    In a page I am using one TabPanel which contain around 3 tabs. At the time of loading the page only first tab needs to show in the table panel and rest of all needs to hide. Then based on button event the respective tabs need to show up. Please check the following code. The tabs are not hiding initially. Instead of .hide() if I use .visible=false; initially it is hiding, but not showing in button events.

    <%@ 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 Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            pnlSection2.Hide();
            pnlSection3.Hide();
        }
    }

    public void ShowSectionSelected(Object sender, DirectEventArgs e)
    {
        Ext.Net.Button btn;
        btn = (Ext.Net.Button)sender;
        if (btn.ID == "btn2")
            pnlSection2.Show();
        else
            pnlSection3.Show();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager" runat="server" />
    <ext:Viewport ID="vpReqFields" runat="server" Layout="border">
        <Items>
            <ext:TabPanel ID="tabSections" runat="server" ActiveTabIndex="0" Title="TabPanel"
                Region="Center">
                <Items>
                    <ext:Panel ID="pnlSection1" runat="server" Title="Section 1" Layout="Fit" BodyStyle="background-color:#d9d9d9">
                    </ext:Panel>
                    <ext:Panel ID="pnlSection2" runat="server" Title="Section 2" Layout="Fit" BodyStyle="background-color:#d9d9d9">
                    </ext:Panel>
                    <ext:Panel ID="pnlSection3" runat="server" Title="Section 3" Layout="Fit" BodyStyle="background-color:#d9d9d9">
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
            <ext:Panel ID="pnlButtons" runat="server" Region="South" Height="40" ButtonAlign="Center">
                <Items>
                </Items>
                <Buttons>
                    <ext:Button ID="btn2" runat="server" Text="Show Section 2">
                        <DirectEvents>
                            <Click OnEvent="ShowSectionSelected">
                                <EventMask ShowMask="true" Msg="Loading..." />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btn3" runat="server" Text="Show Section 3">
                        <DirectEvents>
                            <Click OnEvent="ShowSectionSelected">
                                <EventMask ShowMask="true" Msg="Loading..." />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Apr 09, 2011 at 12:46 PM. Reason: [CLOSED]
  2. #2
    Mar 31, 2011, 11:22 PM
    Hi,

    You can use the .HideTabStripItem and .UnHideTabStripItem Methods on the <ext:TabPanel>. The following sample demonstrates.

    Example

    <%@ 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 Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.TabPanel1.HideTabStripItem(this.Panel2);
            this.TabPanel1.HideTabStripItem(this.Panel3);
            //this.Panel2.Hide();
            //this.Panel3.Hide();
        }
    }
 
    public void ShowSectionSelected(Object sender, DirectEventArgs e)
    {
        Ext.Net.Button btn = (Ext.Net.Button)sender;
        
        if (btn.ID == "Button2")
        {
            this.TabPanel1.UnhideTabStripItem(this.Panel2);
            //this.Panel2.Show();
        }
        else
        {
            this.TabPanel1.UnhideTabStripItem(this.Panel3);
            //this.Panel3.Show();
        }
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Viewport runat="server" Layout="border">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" Title="TabPanel" Region="Center">
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Title="Tab 1" />
                        <ext:Panel ID="Panel2" runat="server" Title="Tab 2" />
                        <ext:Panel ID="Panel3" runat="server" Title="Tab 3" />
                    </Items>
                    <Buttons>
                        <ext:Button ID="Button1" runat="server" Text="Show Tab 2" OnDirectClick="ShowSectionSelected" />
                        <ext:Button ID="Button2" runat="server" Text="Show Tab 3" OnDirectClick="ShowSectionSelected" />
                    </Buttons>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  2. [CLOSED] communication between tabs in a Tabpanel
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 02, 2012, 4:03 PM
  3. [CLOSED] Hiding/showing Tabpanel buggy
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 14, 2012, 11:26 AM
  4. [CLOSED] Hiding/Showing tabs in TabPanel during DirectEvent
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Jul 16, 2010, 3:30 PM
  5. Hi, Why the TabPanel cannot update 2 tabs?
    By bruce in forum 1.x Help
    Replies: 2
    Last Post: Apr 20, 2009, 10:25 PM

Tags for this Thread

Posting Permissions