What's New?

[CLOSED] [1.0] Hiding GroupTabs

Page 1 of 2 12 LastLast
  1. #1
    May 07, 2010, 7:50 AM

    [CLOSED] [1.0] Hiding GroupTabs

    In the following example - "#/TabPanel/GroupTabPanel/Overview/", how can I dynamically hide one of the GroupTabs (e.g. "Configuration"), via server-side code and from JavaScript? Setting "Hidden" to true on the GroupTab doesn't appear to do anything.

    Thanks

    Dan
  2. #2
    May 07, 2010, 10:40 AM

    RE: [CLOSED] [1.0] Hiding GroupTabs

    Hi,

    That extension doesn't support hiding but you can use the following script. Need show/hide element with the following id
    GroupTabPanelID__GroupID


    - hide: 
    Ext.fly("GroupTabPanel1__Group2").addClass("x-hide-display")
    - show: 
    Ext.fly("GroupTabPanel1__Group2").removeClass("x-hide-display")
  3. #3
    May 07, 2010, 12:04 PM

    RE: [CLOSED] [1.0] Hiding GroupTabs

    Thanks, works great.

    I'm going to use this quite a bit throughout my app, so I made the following server-side / client-side methods that perform the show / hide code, if anyone wants to use these in the future:

    Server-side extension methods (example usage: "groupTabPanel1.HideGroupTab(groupTab1)"):
    public static void HideGroupTab(this GroupTabPanel oGroupTabPanel, GroupTab oGroupTab)
{
    oGroupTabPanel.AddScript("Ext.fly('" + oGroupTabPanel.ID + "__" + oGroupTab.ID + "').addClass('x-hide-display');");
}

public static void ShowGroupTab(this GroupTabPanel oGroupTabPanel, GroupTab oGroupTab)
{
    oGroupTabPanel.AddScript("Ext.fly('" + oGroupTabPanel.ID + "__" + oGroupTab.ID + "').removeClass('x-hide-display');");
}
    Client-side methods (example usage: "groupTabPanel1.hideGroupTab(groupTab1)"):
    Ext.ux.GroupTabPanel.override
({
    hideGroupTab: function(oGroupTab)
    {
        Ext.fly(this.id + "__" + oGroupTab.id).addClass("x-hide-display");
    },

    showGroupTab: function(oGroupTab)
    {
        Ext.fly(this.id + "__" + oGroupTab.id).removeClass("x-hide-display");
    }
});
  4. #4
    May 07, 2010, 12:31 PM

    RE: [CLOSED] [1.0] Hiding GroupTabs

    If you have the client-side function, then in your Extension Method, you should be able to just call the following...

    Example


    oGroupTabPanel.Call("hideGroupTab", oGroupTab.ID);

    I also suspect you should be passing the .ClientID, instead of the .ID.


    Hope this helps.


    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
  5. #5
    May 07, 2010, 2:26 PM

    RE: [CLOSED] [1.0] Hiding GroupTabs

    I would also be interested in know if the following works for you...

    Example


    X.Fly(oGroupTabPanel.ID + "__" + oGroupTab.ID).AddClass("x-hide-display");

    This can avoid the use of .AddScript.


    Again, you might need to be calling .ClientID instead of .ID.


    Hope this helps.


    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
  6. #6
    Mar 07, 2012, 7:35 PM
    I can't seem to get any of these solutions to work. Is there a better way to hide group tabs? or has something changed that would make this solution invalid?
  7. #7
    Mar 07, 2012, 8:02 PM
    Did you set up IDs for GroupTabs and use these IDs when you are trying?

    I think the GroupTabs IDs have been just removed from our example since they are not required.
  8. #8
    Mar 07, 2012, 8:29 PM
    Yes. The GroupTabs that I'm trying to hide do have IDs.
  9. #9
    Mar 07, 2012, 8:49 PM
    Ok, the following example work, please provide your test case.

    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">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var toggle = function (groupTabId) {
            Ext.fly(groupTabId).toggleClass("x-hide-display");
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Toolbar runat="server" Region="North" Height="25">
                <Items>
                    <ext:Button runat="server" Text="Toogle 1">
                        <Listeners>
                            <Click Handler="toggle('GroupTabPanel1__GroupTab1');" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="Toogle 2">
                        <Listeners>
                            <Click Handler="toggle('GroupTabPanel1__GroupTab2');" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
            <ext:GroupTabPanel 
                ID="GroupTabPanel1" 
                runat="server" 
                Region="Center" 
                ActiveGroupIndex="0"
                TabWidth="150">
                <Groups>
                    <ext:GroupTab ID="GroupTab1" runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="GroupTab1 Tab1" Html="GroupTab1 Tab1" />
                            <ext:Panel runat="server" Title="GroupTab1 Tab2" Html="GroupTab1 Tab2" />
                        </Items>
                    </ext:GroupTab>
                    <ext:GroupTab ID="GroupTab2" runat="server">
                        <Items>
                            <ext:Panel runat="server" Title="GroupTab2 Tab1" Html="GroupTab2 Tab1" />
                            <ext:Panel runat="server" Title="GroupTab2 Tab2" Html="GroupTab2 Tab2" />
                        </Items>
                    </ext:GroupTab>
                </Groups>
            </ext:GroupTabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>
  10. #10
    Mar 07, 2012, 9:05 PM
    Your example works, and when I tried to construct a similar example, it worked. The only difference is that the GroupTabPanel is actually in a web user control. Is there anything different that needs to be done in that case?
Page 1 of 2 12 LastLast

Similar Threads

  1. [FIXED] [1.2] GroupTabPanel selects all grouptabs on postback
    By yesuah in forum Bugs
    Replies: 4
    Last Post: Jan 12, 2012, 8:31 AM
  2. [CLOSED] [1.0] MVC Control Hiding
    By alliedwallet.com in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 27, 2010, 3:04 PM
  3. [CLOSED] Hiding CheckBoxGroups
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 26, 2010, 9:23 PM
  4. GroupTabs
    By sbarnes in forum 1.x Help
    Replies: 2
    Last Post: Aug 14, 2009, 12:18 AM
  5. [CLOSED] hiding a Tab on closing
    By prashobkumar in forum 1.x Help
    Replies: 4
    Last Post: Dec 10, 2008, 5:03 AM

Tags for this Thread

Posting Permissions