[CLOSED] [#548] [4.3.0] GroupTabPanel Example

  1. #1

    [CLOSED] [#548] [4.3.0] GroupTabPanel Example

    Dear ext.net developers,
    Example with GroupTabPanel is not working on your site. I tried to recreate this example locally and got strange error: the tabs are not visible.

    <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel runat="server" Layout="FitLayout" Border="false">
                    <Items>
                        <ext:GroupTabPanel ID="GroupTabPanel1" runat="server">
                            <Items>
                                <ext:Panel runat="server">
                                    <Items>
                                        <ext:Portal 
                                            runat="server" 
                                            Title="Dashboard"
                                            Border="false">
                                            <Items>
                                                <ext:PortalColumn 
                                                    runat="server"                                        
                                                    ColumnWidth="1">
                                                    <Items>
                                                        <ext:Portlet 
                                                            runat="server" 
                                                            Title="Portlet 1" 
                                                            Padding="6"
                                                            Html="1" 
                                                            />
                                                
                                                        <ext:Portlet 
                                                            runat="server" 
                                                            Title="Portlet 2" 
                                                            Padding="6"
                                                            Html="2" 
                                                            />
                                                    </Items>
                                                </ext:PortalColumn>                                  
                                            </Items>
                                        </ext:Portal>
                                
                                        <ext:Panel 
                                            runat="server" 
                                            Title="Subscriptions" 
                                            Icon="Newspaper" 
                                            StyleSpec="padding: 10px;" 
                                            Border="false"
                                            Layout="Fit">
                                            <Items>
                                                <ext:TabPanel runat="server" ActiveTabIndex="0">
                                                    <Items>
                                                        <ext:Panel 
                                                            runat="server" 
                                                            Title="Subscriptions" 
                                                            BodyPadding="5"
                                                            Html="3" 
                                                            />
                                                    </Items>
                                                </ext:TabPanel>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel
                                            runat="server" 
                                            Title="Users" 
                                            Icon="Group" 
                                            StyleSpec="padding: 10px;"
                                            Html="4" 
                                            />
                                    </Items>
                                </ext:Panel>
                                <ext:Panel runat="server">
                                    <Items>
                                        <ext:Panel 
                                            runat="server" 
                                            Title="Configuration" 
                                            StyleSpec="padding: 10px;"
                                            Html="5" 
                                            />
                                        <ext:Panel 
                                            runat="server" 
                                            Title="Email Templates" 
                                            Icon="Email"
                                            StyleSpec="padding: 10px;" 
                                            Border="false">
                                            <Items>
                                                <ext:FormPanel runat="server" Title="Form Layout" BodyStyle="padding:15px">
                                                    <FieldDefaults LabelWidth="75" LabelPad="20" LabelSeparator="" />
                                                    <Defaults>
                                                        <ext:Parameter Name="width" Value="230" />
                                                        <ext:Parameter Name="msgTarget" Value="side" />
                                                    </Defaults>
                                                    <Items>
                                                        <ext:TextField runat="server" FieldLabel="First Name" AllowBlank="false" />
                                                        <ext:TextField runat="server" FieldLabel="Last Name" />
                                                        <ext:TextField runat="server" FieldLabel="Company" />
                                                        <ext:TextField runat="server" FieldLabel="Email" Vtype="email" />
                                                    </Items>
                                                    <Buttons>
                                                        <ext:Button runat="server" Text="Save" />
                                                        <ext:Button runat="server" Text="Cancel" />
                                                    </Buttons>
                                                </ext:FormPanel>
                                            </Items>    
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>                
                        </ext:GroupTabPanel>    
                    </Items>
    
                    <BottomBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:SplitButton
                                    runat="server" 
                                    AllowDepress="false"
                                    Icon="Tab" 
                                    ToggleGroup="group"
                                    Pressed="true" 
                                    Text="Dashboard">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Tickets" Icon="TagBlue">
                                                    <Listeners>
                                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(0) && #{GroupTabPanel1}.setActiveTab(1);" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem runat="server" Text="Subscriptions" Icon="Newspaper">
                                                    <Listeners>
                                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(0) && #{GroupTabPanel1}.setActiveTab(2);" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                                <ext:MenuItem runat="server" Text="Users" Icon="Group">
                                                    <Listeners>
                                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(0) && #{GroupTabPanel1}.setActiveTab(3);" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                    <Listeners>
                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(0) && #{GroupTabPanel1}.setActiveTab(0);" />
                                    </Listeners>
                                </ext:SplitButton>
                                <ext:ToolbarSpacer runat="server" />
                                <ext:SplitButton 
                                    ID="Group2Btn" 
                                    AllowDepress="false"
                                    runat="server" 
                                    Icon="Tab" 
                                    ToggleGroup="group" 
                                    Text="Configuration">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Email Templates" Icon="Email">
                                                    <Listeners>
                                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(1) && #{GroupTabPanel1}.setActiveTab(1);" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                    <Listeners>
                                        <Click Handler="#{GroupTabPanel1}.setActiveGroup(1) && #{GroupTabPanel1}.setActiveTab(0);" />
                                    </Listeners>
                                </ext:SplitButton>
                                <ext:ToolbarFill runat="server" />
                                <ext:Button ID="Button1" runat="server" Text="Set Custom Css Class" Icon="BulletBlue">
                                    <Listeners>
                                        <Click Handler="#{GroupTabPanel1}.addCls('custom'); this.disable(); #{Button2}.enable();" />
                                    </Listeners>
                                </ext:Button>
                                
                                <ext:Button ID="Button2" runat="server" Text="Remove Customer Css Class" Disabled="true" Icon="BulletBlack">
                                    <Listeners>
                                        <Click Handler="#{GroupTabPanel1}.removeCls('custom'); this.disable(); #{Button1}.enable();" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    Please, help me to resolve this problem.
    Attached Thumbnails IMG_14012015_114717.png  
    Last edited by fabricio.murta; Jun 06, 2017 at 6:43 PM.
  2. #2
    Hi Yaroslav,

    Welcome to the Ext.NET forums!

    Thank you for the report. It is a known issue.
    https://github.com/extnet/Ext.NET/issues/548

    We forgot to add a breaking change item and put a respective message into the example.

    Sorry for the inconvenience.
  3. #3
    Hello!

    It seems the component has been completely removed from ExtJS as of 6.5.0, besides not being fixed until 6.2.1. The corresponding ExtJS thread points towards it being fixed in ExtJS 5.1.5, which has not been released (at least thus far). If it didn't make it to version 6.5.0 that was just released, I believe there were major issues making it work on newer ExtJS versions and it was decided to discontinue the component.

    That said, I don't see the component ever making it back to ExtJS, so it was as well removed from Ext.NET.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. GroupTabPanel
    By Prasoon in forum 2.x Help
    Replies: 0
    Last Post: Mar 16, 2016, 8:03 AM
  2. [CLOSED] GroupTabPanel
    By rcaunt in forum 2.x Premium Help
    Replies: 2
    Last Post: May 02, 2012, 4:39 PM
  3. [CLOSED] Help with CSS of grouptabpanel
    By Pablo_Azevedo in forum 1.x Premium Help
    Replies: 4
    Last Post: Mar 31, 2011, 12:51 PM
  4. [CLOSED] GroupTabPanel bug
    By Jurke in forum 1.x Premium Help
    Replies: 4
    Last Post: Jul 07, 2010, 6:54 AM
  5. [CLOSED] [1.0] GroupTabPanel bug?
    By Jurke in forum 1.x Premium Help
    Replies: 4
    Last Post: Jul 02, 2010, 6:20 PM

Posting Permissions