Vertical tabs (without the groups) using GroupTabPanel

  1. #1

    Vertical tabs (without the groups) using GroupTabPanel

    The GroupTabPanel example here is quite useful: https://examples1.ext.net/#/TabPanel...anel/Overview/

    But sometimes you want vertical tabs without the grouping inside each tab.

    So here's an example to do that. The main thing is just some extra CSS to override some defaults (such as removing the background colour (some off-blue) and using border radius instead of background images for the tabs which means it looks a bit more plain on IE, but that's fine for my needs). [Note, I am working with the gray theme, so you may need to modify the CSS in the example for your needs.]

    The CSS is at the top of the page so you can change it as you need. (Note, I have used a class of vertical-tabs in the GroupTabPanel, so the CSS rules are prefixed with that accordingly. This way you can use GroupTabPanel with grouped tabs as needed, elsewhere without this CSS affecting it.)

    <%@ 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 id="Head1" runat="server">
        <title>GroupTabPanel - Ext.NET Examples</title>
     
        <style type="text/css">
            .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;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North Split="true">
                        <ext:Panel ID="HeaderPanel" Height="50" Html="Header" runat="server" />
                    </North>
                    <West Collapsible="true" Split="true">
                        <ext:Panel ID="WestPanel" Height="50" Width="200" Html="West" runat="server" />
                    </West>
                    <Center>
                        <%-- If your header doesn't have split=true, can change Margins="0" to Margins="6 6 6 0" for example --%>
                        <ext:GroupTabPanel ID="GroupTabPanel1" Cls="vertical-tabs" runat="server" TabWidth="130" ActiveGroupIndex="0" Padding="3" Margins="0">
                            <Groups>
                                <ext:GroupTab ID="GroupTab1" runat="server" MainItem="0" Expanded="False" Frame="True" HeaderAsText="True" HideBorders="False">
                                    <Items>
                                        <ext:Panel ID="TabPanelContainer" Layout="fit" runat="server" Title="Tab Panel and too <br />much text" Padding="2">
                                            <Items>
                                                <ext:TabPanel ID="TabPanel2" runat="server" Plain="true" Title="TabPanel1 title" Padding="3">
                                                    <Items>
                                                        <ext:Panel ID="Panel1" runat="server" Title="Tab 1">
                                                            <Content>
                                                                <p>Note limitations:</p>
                                                                <p>1) Vertical tab width limit is set in pixels so title may overflow and be hidden</p>
                                                                <p>2) The TabPanel here is inside a Panel so the Panel can be given some padding</p>
                                                            </Content>
                                                        </ext:Panel>
                                                        <ext:Panel ID="Panel2" runat="server" Title="Tab 2">
                                                            <Content>
                                                                <p>Tab 2 contents</p>
                                                            </Content>
                                                        </ext:Panel>
                                                        <ext:Panel ID="Panel3" runat="server" Title="Tab 3">
                                                            <Content>
                                                                <p>Tab 3 contents</p>
                                                            </Content>
                                                        </ext:Panel>
                                                    </Items>
                                                </ext:TabPanel>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="Group2" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel5" 
                                            runat="server" 
                                            Title="Group Tab 2" 
                                            TabTip="Group tab 2 tabtip" 
                                            Html="Group Tab Panel contents 2" />
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="GroupTab2" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel4" 
                                            runat="server" 
                                            Title="Group Tab 3" 
                                            TabTip="Group tab 3 tabtip" 
                                            Html="Group Tab Panel contents 3" />
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="GroupTab3" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel6" 
                                            runat="server" 
                                            Title="Group Tab 4" 
                                            TabTip="Group tab 4 tabtip" 
                                            Html="Group Tab Panel contents 4" />
                                    </Items>
                                </ext:GroupTab>
                            </Groups>
                        </ext:GroupTabPanel>
                    </Center>
                    <South Split="true">
                        <ext:Panel ID="FooterPanel" Height="50" Html="Footer" runat="server" />
                    </South>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Screenshot also attached.

    Hope that is useful!
    Attached Thumbnails Click image for larger version. 

Name:	vertical-tabs-example.png 
Views:	2051 
Size:	77.3 KB 
ID:	1594  
    Last edited by anup; Sep 08, 2010 at 4:26 PM. Reason: Improved CSS and used a custom class on the GroupTabPanel so it does not change all uses of GroupTabPanel
  2. #2
    Hi Anup,

    Just accidentally found that thread. Thanks for sharing! Looks good and, I think, it might be really helpful for others. For example, for @supera:
    http://forums.ext.net/showthread.php...ll=1#post85393

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. Order GridPanel Groups
    By dany4446 in forum 1.x Help
    Replies: 4
    Last Post: Feb 03, 2012, 1:37 AM
  3. [CLOSED] Vertical Button With Text, Or Vertical Tabs
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 21, 2011, 9:43 PM
  4. Vertical tabs in ext.Net
    By Prasad in forum 1.x Help
    Replies: 5
    Last Post: Sep 08, 2010, 3:00 PM
  5. [CLOSED] A vertical line beside the tabs.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 05, 2010, 4:41 PM

Tags for this Thread

Posting Permissions