PDA

View Full Version : Vertical tabs (without the groups) using GroupTabPanel



anup
Sep 08, 2010, 2:33 PM
The GroupTabPanel example here is quite useful: http://examples1.ext.net/#/TabPanel/GroupTabPanel/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!

Daniil
Jun 29, 2012, 11:12 AM
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?19555&p=85393&viewfull=1#post85393