Not able to add/remove tabs using DirectMethod

  1. #1

    Not able to add/remove tabs using DirectMethod

    Hi guys, I've have spent a couple hours trying to do a simple thing without luck, hiding and showing tabs using a DirectMethod, I don't want the tabs to get destroyed but hidden and them bring them visible as needed, it's a simple conditional that hides or shows tabs added on the markup, I can't create them with javascript because they are too complex, can you please look at my code?
    Thank you

    <%@ 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)
        {
            Panel2.Hidden = false;//doesn't work
            Panel2.Show();//doesn't work
            
            Panel3.Hidden = true; 
            Panel3.Hide();
    
            X.MessageBox.Notify("Done", "It's done").Show();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" language="javascript">
            function Toggle() {
                Ext.getCmp("TabPanel1").addTab("Panel2");
                Ext.getCmp("TabPanel1").closeTab("Panel3");
    
                alert('done');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Button ID="Button1" runat="server" Text="Show Panel2 and Hide Panel3">
                <DirectEvents>
                    <Click OnEvent="Button1_Click"></Click>
                </DirectEvents>
            </ext:Button>
            &nbsp;
            <ext:Button ID="Button2" runat="server" Text="Show Panel2 and Hide Panel3 (Client Side)">
               <Listeners>
                    <Click Handler="Toggle()" />
               </Listeners>
            </ext:Button>
            <ext:TabPanel ID="TabPanel1" runat="server" Height="300">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Title="Tab 1">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server" Title="Tab 2 - Show me" Hidden="true">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel3" runat="server" Title="Tab 3 - Hide me">
                        <Items>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </div>
        </form>
    </body>
    </html>
  2. #2
    Could you guys help me here? It's something simple but I can't seem to get it right, I just need to hide and show tabs on a DirectMethos, not destroy and create.
    Thanks!
  3. #3
    Hi,

    Please see (Tab6)
    http://examples1.ext.net/#/TabPanel/Basic/Show_Hide/

    TabPanel1.AddScript("{0}.addTab({1});", TabPanel1.ClientID, Panel2.ClientID);
    Vladimir Shcheglov
    Sr. Developer
  4. #4
    Quote Originally Posted by Vladimir View Post
    Hi,

    Please see (Tab6)
    http://examples1.ext.net/#/TabPanel/Basic/Show_Hide/

    TabPanel1.AddScript("{0}.addTab({1});", TabPanel1.ClientID, Panel2.ClientID);
    That worked, thanks a lot! I've seen that example but didn't know about the "AddScript" method or what it was useful for.
    Just complementing the close function for people that read this:

    <ext:Panel ID="Panel2" runat="server" Title="Tab 2" Hidden="true" CloseAction="Hide">
    <Items>
    </Items>
    </ext:Panel>
    TabPanel1.AddScript("{0}.closeTab({1});", TabPanel1.ClientID, Panel2.ClientID);
    Case closed.

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  3. Replies: 2
    Last Post: Jan 19, 2012, 12:42 PM
  4. Add Remove
    By cbu in forum 1.x Help
    Replies: 3
    Last Post: Jan 10, 2012, 8:23 PM
  5. Replies: 1
    Last Post: Mar 01, 2011, 11:37 AM

Posting Permissions