Sep 21, 2010, 7:13 PM
[CLOSED] [1.0] BorderLayout inside GroupTab inside TabPanel not showing up
Hi,
I'm struggling with the following scenario:
In side a border layout for the page,
1) Everything renders okay apart from the Border layout, which does not show up (though inspecting with Firebug it is there)
2) I can't seem to get the GroupTab to fit the contents of the tab panel that it is inside
I think issue 2) might be related to issue 1) because the Border Layout seems to be there when you inspect in Firebug, but the initial height seems to be too small. So perhaps solving the second issue will solve the first?
I've tried lots of combinations, but I am sure I have missed something really simple and obvious!
Here is what I have so far:
I'm struggling with the following scenario:
In side a border layout for the page,
- I have a tab panel,
- Inside one of the tabs I have a group tab.
- The contents for one of the group tab needs to be a border layout.
- Inside one of the tabs I have a group tab.
1) Everything renders okay apart from the Border layout, which does not show up (though inspecting with Firebug it is there)
2) I can't seem to get the GroupTab to fit the contents of the tab panel that it is inside
I think issue 2) might be related to issue 1) because the Border Layout seems to be there when you inspect in Firebug, but the initial height seems to be too small. So perhaps solving the second issue will solve the first?
I've tried lots of combinations, but I am sure I have missed something really simple and obvious!
Here is what I have so far:
<%@ 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>
<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>Group Tab 1 contents</p>
</Content>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="Has Group Tabs inside">
<Items>
<ext:Panel ID="Panel8" Layout="fit" runat="server" Border="false">
<Items>
<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" runat="server" Title="Tab Panel 1" Padding="2">
<Content>
<p>Sample content</p>
</Content>
</ext:Panel>
</Items>
</ext:GroupTab>
<ext:GroupTab ID="GroupTab3" runat="server">
<Items>
<ext:Panel ID="Panel6" runat="server" Title="Group Tab 4" Html="Group Tab Panel contents 4" />
</Items>
</ext:GroupTab>
<ext:GroupTab ID="GroupTab4" runat="server">
<Items>
<ext:Panel ID="Panel7" runat="server" Title="Has border layout">
<Items>
<ext:BorderLayout ID="BorderLayoutNested" runat="server">
<Center MinHeight="70">
<ext:Panel
ID="CenterPanelContent"
runat="server"
Height="70"
AutoScroll="true">
<Content>
<p>Content for center panel</p>
</Content>
</ext:Panel>
</Center>
<South Split="true" Floatable="false">
<ext:Panel
AutoScroll="true"
CollapseFirst="false"
Collapsible="true"
Height="313"
Icon="Table"
ID="SouthPanelContent"
runat="server"
Title="Buckets"
TitleCollapse="true" />
</South>
</ext:BorderLayout>
</Items>
</ext:Panel>
</Items>
</ext:GroupTab>
</Groups>
</ext:GroupTabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</body>
</html><%@ 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>
<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>
<ext:GroupTab ID="GroupTab4" runat="server">
<Items>
<ext:Panel ID="Panel7" Layout="fit" runat="server" Title="Group tab 5">
<Items>
<ext:BorderLayout ID="BorderLayoutNested" runat="server">
<Center MinHeight="70">
<ext:Panel
ID="CenterPanelContent"
runat="server"
Height="70"
AutoScroll="true">
<Content>
<p>Content for center panel</p>
</Content>
</ext:Panel>
</Center>
<South Split="true" Floatable="false">
<ext:Panel
AutoScroll="true"
CollapseFirst="false"
Collapsible="true"
Height="313"
Icon="Table"
ID="SouthPanelContent"
runat="server"
Title="Buckets"
TitleCollapse="true" />
</South>
</ext:BorderLayout>
</Items>
</ext:Panel>
</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>
Last edited by geoffrey.mcgill; Sep 22, 2010 at 9:28 PM.
Reason: [CLOSED]
Originally Posted by geoffrey.mcgill
