[CLOSED] Hiding tab panel content dynamically

[SymSure]

Hi I have a grouptab panel and want to hide some of the panels on some condition but the hide moethod on the panel is not hiding the panel.

.vertical-tabs.x-grouptabs-panel
{
    background: transparent;
    border: none;
}
.vertical-tabs.x-grouptabs-panel .x-grouptabs-panel-body
{
    border-color: #ccc;
}


.vertical-tabs.x-grouptabs-panel .x-grouptabs-corner
{
    background-image: none;
}
.vertical-tabs .x-grouptabs-expand
{
    display: none;
}
.vertical-tabs.x-tab-panel-left ul.x-grouptabs-strip li.x-grouptabs-strip-active, .vertical-tabs.x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active
{
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-color: #ccc;
}
.vertical-tabs.x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active
{
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}
.vertical-tabs.x-grouptabs-panel .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text
{
    font-size: 11px;
    padding: 0 2px; /* if you don't expect to use icons for the tabs */
    color: #555;
}
.vertical-tabs.x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text
{
    text-align: left;
}

<ext:Window ID="winNewNotification" runat="server" Title="Dynamic tab hide"
    AutoDataBind="true" Width="500" Height="550" Border="false" Closable="true" Draggable="true"
    Modal="true" CloseAction="Destroy" IDMode="Static" Resizable="false" Layout="fit">
    <Items>
        <ext:GroupTabPanel ID="tbNewNotificationTab" Cls="vertical-tabs" runat="server" TabWidth="150"
            ActiveGroupIndex="0" Padding="3" Margins="5">
            <Items>
                <ext:Panel runat="server">
                    <Items>
                        <ext:Panel ID="tbPnlNewNoticationGeneral" runat="server" Title="main"
                            Layout="FitLayout" Border="false">
                            <Items>
                                <ext:Panel runat="server" Layout="AnchorLayout" BodyPaddingSummary="10px 10px 10px 10px"
                                    Border="false">
                                    <Items>
                                        <ext:TextField ID="txtNewNotificationName" IDMode="Static" runat="server" FieldLabel="sample"
                                            AnchorHorizontal="100%" EnableKeyEvents="true" TabIndex="21" Text="" MaxLength="100">
                                            
                                        </ext:TextField>                                        
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>              
                <ext:Panel runat="server" ID="hidethisgroup">
                    <Items>
                        <ext:Panel ID="hideThispanel" runat="server" Title="to be hidden">
                            <Items>
                                <ext:Panel runat="server" Layout="Fit" BodyPaddingSummary="10px 10px 0px 10px" Border="false"
                                    ID="pnlOptionHolder" Height="400">
                                    <Items>
                                    </Items>
                                </ext:Panel>
                            </Items>                           
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>            
        </ext:GroupTabPanel>
    </Items>   
    
    
</ext:Window>

in my javascript i am using the method

  App.hideThispanel.hide();

I even tried

  App.hidethisgroup.hide();

and yet the tab still shows.

How can i hide and show the tab dynamically.

[Daniil]

Hi,

Please investigate the example.
https://examples2.ext.net/#/TabPanel/Basic/Show_Hide/

[SymSure]

The example you refered me to is different from my situation. The example uses tab panel. I am using a group tab panel and I tried the implementation there it does not work.

I set the panel closeAction to hide and called the close function of the panel. This is what the example you refered me to did.

<ext:Window ID="winNewNotification" runat="server" Title="Dynamic tab hide"
    AutoDataBind="true" Width="500" Height="550" Border="false" Closable="true" Draggable="true"
    Modal="true" CloseAction="Destroy" IDMode="Static" Resizable="false" Layout="fit">
    <Items>
        <ext:GroupTabPanel ID="tbNewNotificationTab" Cls="vertical-tabs" runat="server" TabWidth="150"
            ActiveGroupIndex="0" Padding="3" Margins="5">
            <Items>
                <ext:Panel runat="server">
                    <Items>
                        <ext:Panel ID="tbPnlNewNoticationGeneral" runat="server" Title="main"
                            Layout="FitLayout" Border="false">
                            <Items>
                                <ext:Panel runat="server" Layout="AnchorLayout" BodyPaddingSummary="10px 10px 10px 10px"
                                    Border="false">
                                    <Items>
                                        <ext:TextField ID="txtNewNotificationName" IDMode="Static" runat="server" FieldLabel="sample"
                                            AnchorHorizontal="100%" EnableKeyEvents="true" TabIndex="21" Text="" MaxLength="100">
                                             
                                        </ext:TextField>                                        
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>              
                <ext:Panel runat="server" ID="hidethisgroup">
                    <Items>
                        <ext:Panel ID="hideThispanel" runat="server" Title="to be hidden"  CloseAction="hide">
                            <Items>
                                <ext:Panel runat="server" Layout="Fit" BodyPaddingSummary="10px 10px 0px 10px" Border="false"
                                    ID="pnlOptionHolder" Height="400">
                                    <Items>
                                    </Items>
                                </ext:Panel>
                            </Items>                           
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>            
        </ext:GroupTabPanel>
    </Items>   
     
     
</ext:Window>

App.hideThispanel.close();

[Daniil]

the close function of the panel. This is what the example you refered me to did.

There is the closeTab call of TabPanel. Though, never mind, you are right that it is not appropriate for your case. My fault.

Generally, there is no API to hide the groups. I can suggest the following solution, please investigate the example.

Example

<%@ Page Language="C#" %>
   
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
  
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
  
    <script type="text/javascript">
        var hideGroup2 = function (groupTabId) {
            var tree = App.GroupTabPanel1.child("treepanel"),
                regExp = new RegExp("Group2");

            tree.filterBy(function (node) {
                return !regExp.test(node.getId());
            });
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Container runat="server" Region="West" Width="100">
                <Items>
                    <ext:Button runat="server" Text="Hide Group2">
                        <Listeners>
                            <Click Fn="hideGroup2" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Container>
            <ext:GroupTabPanel
                ID="GroupTabPanel1"
                runat="server"
                Region="Center"
                ActiveGroupIndex="0"
                TabWidth="150">
                <Items>
                    <ext:Panel runat="server">
                        <Items>
                            <ext:Panel 
                                ID="Group1_Panel1" 
                                runat="server" 
                                Title="Group1 Tab1" 
                                Html="Group1 Tab1" />
                            <ext:Panel 
                                ID="Group1_Panel2" 
                                runat="server" 
                                Title="Group1 Tab2" 
                                Html="Group1 Tab2" />
                        </Items>
                    </ext:Panel>
                    <ext:Panel runat="server">
                        <Items>
                            <ext:Panel 
                                ID="Group2_Panel1" 
                                runat="server" 
                                Title="Group2 Tab1" 
                                Html="Group2 Tab1" />
                            <ext:Panel 
                                ID="Group2_Panel2" 
                                runat="server" 
                                Title="Group2 Tab2" 
                                Html="Group2 Tab2" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:GroupTabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>