Aug 14, 2012, 8:16 AM
HBoxLayout, how to set scrollbar
Dear Sir,
I had created page that content will be center (please see image below) like this forum
with HBoxLayout.
In HBoxLayout contain VBoxLayout panel that has 3 panel eg. Header panel (Region="North"),
Content TabPanel (Region="Center") and Footer panel (Region="South")
If content in TabPanel height more than Screen height it not show vertical scrollbar.
How to fix it, please advice.
Thank you very much.
I had created page that content will be center (please see image below) like this forum
with HBoxLayout.
In HBoxLayout contain VBoxLayout panel that has 3 panel eg. Header panel (Region="North"),
Content TabPanel (Region="Center") and Footer panel (Region="South")
If content in TabPanel height more than Screen height it not show vertical scrollbar.
How to fix it, please advice.
Thank you very much.
<%@ 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>Sample</title>
<link rel="stylesheet" type="text/css" href="resources/css/examples.css" />
<style type="text/css">
body
{
background-image: url("resources/images/bg.gif");
}
.transparent-window,
.transparent-window .x-window-body,
.transparent-window .x-panel-body
{
background-color: Transparent;
}
.transparent-panel
{
background-color: Transparent;
}
.x-panel-body {border:1px solid #aaa;border-top:none;border-bottom:none;}
.ovTabStrip .x-panel-body {border:none;}
.ovTabStrip .x-tab-strip span .x-tab-strip-text {font-size:15px !important;font-weight: normal !important;color: #006633 !important;text-align:center !important;}
.ovTabStrip .x-tab-strip-active span .x-tab-strip-text {font-weight: bold !important;color: #006600 !important;}
</style>
</head>
<body>
<form id="formWorkers" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel1" runat="server" Width="960" Layout="VBoxLayout" Border="true" >
<Items>
<ext:Panel ID="HeaderPanel"
runat="server"
Region="North"
Height="120"
Split="false"
Border="false"
HideBorders="true">
<Items>
<ext:Panel ID="Banner" runat="server" Width="960" Html="<center><H1>HEADER BANNER</H1><center>" />
</Items>
</ext:Panel>
<ext:TabPanel ID="ContenPanel"
runat="server"
Region="Center"
Split="false"
MinTabWidth= "157"
TabWidth= "157"
Width="960"
margins="0 0 0 0"
Cls="ovTabStrip"
Border="false"
Flex="1" >
<Items>
<ext:Panel runat="server" ID="HomeTab" Title="HOME" Width="960" Padding="0" AutoScroll="true"
Html="1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />">
</ext:Panel>
<ext:Panel runat="server" ID="ResourcesTab" Title="RESOURCES" Width="960" Padding="6">
</ext:Panel>
<ext:Panel runat="server" ID="OpacTab" Title="SEARCH" Width="960" Padding="6">
</ext:Panel>
<ext:Panel runat="server" ID="MemberTab" Title="MEMBER" Width="960" Padding="6">
</ext:Panel>
<ext:Panel runat="server" ID="EventsTab" Title="EVENTS" Width="960" Padding="6">
</ext:Panel>
<ext:Panel runat="server" ID="ContactTab" Title="CONTACT US" Width="960" Padding="6">
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel ID="FooterPanel"
runat="server"
Region="South"
Height="41"
Split="false"
Border="false"
StyleSpec="border-top:1px solid #aaa;"
HideBorders="true">
<Items>
<ext:panel ID="footerBanner" runat="server" Width="960" Html="<center><H3>FOOTER BANNER</H3></center>" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>