May 28, 2010, 5:22 AM
[CLOSED] Using Accordion to switch between panels in center. Height and width only set on initally displayed panel
This is an example of the core functionallity of the main interface of my application.
In my app the three accordion panels contain two tree views and a search form.
Originally I used one panel with an auto load Iframe in the center but this was too slow. Thus I have changed to the current design. All works well except only the originally visible center panel has the correct height and width. The others never get set. Is there any way I can force these panels to occupy the full screen area when they are displayed?
In my app the three accordion panels contain two tree views and a search form.
Originally I used one panel with an auto load Iframe in the center but this was too slow. Thus I have changed to the current design. All works well except only the originally visible center panel has the correct height and width. The others never get set. Is there any way I can force these panels to occupy the full screen area when they are displayed?
<%@ Page Language="C#" %>
<!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 runat="server" id="pageTitle"></title>
<link href="Stylesheet.css" rel="Stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function defaultShowSection(lSectionID)
{
switch (lSectionID)
{
case 1:
{
frmMainPanel.show();
frmSearchPanel.hide();
frmAdminPanel.hide();
break;
}
case 2:
{
frmMainPanel.hide();
frmSearchPanel.show();
frmAdminPanel.hide();
break;
}
case 3:
{
frmMainPanel.hide();
frmSearchPanel.hide();
frmAdminPanel.show();
break;
}
}
}
</script>
</head>
<body oncontextmenu="return false;">
<form id="form1" runat="server">
<ext:ResourceManager ID="smrMain" runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" ID="vwDefault">
<Items>
<ext:BorderLayout ID="Borderlayout1" runat="server">
<West AnimFloat="false" Floatable="false" MinWidth="200" MaxWidth="300" Split="true">
<ext:Panel HideBorders="true" runat="server" ID="frmNavigation" Floating="false"
Width="200" Title="Navigation" AnimCollapse="false" Collapsed="false" Collapsible="true">
<Content>
<ext:AccordionLayout ID="AccordionLayout1" HideCollapseTool="true" AutoWidth="true"
runat="server">
<Items>
<ext:Panel runat="server" ID="panel1" Title="Google">
<Listeners>
<Expand Handler="defaultShowSection(1);" />
</Listeners>
</ext:Panel>
<ext:Panel runat="server" ID="panel2" Title="Ext.Net Examples">
<Listeners>
<Expand Handler="defaultShowSection(2);" />
</Listeners>
</ext:Panel>
<ext:Panel runat="server" ID="panel3" Title="Extjs Documentation">
<Listeners>
<Expand Handler="defaultShowSection(3);" />
</Listeners>
</ext:Panel>
</Items>
</ext:AccordionLayout>
</Content>
</ext:Panel>
</West>
<Center>
<ext:Container ID="CenterPanel" runat="server" ForceLayout="true" Layout="Fit">
<Content>
<ext:Panel ForceLayout="true" HideBorders="true" runat="server" ID="frmMainPanel"
Layout="Fit">
<AutoLoad Mode="IFrame" Url="http://www.google.co.uk/" ShowMask="true" MaskMsg="Loading Home Page ...">
</AutoLoad>
</ext:Panel>
<ext:Panel ForceLayout="true" HideBorders="true" runat="server" ID="frmSearchPanel"
Layout="Fit" Hidden="true">
<AutoLoad Mode="IFrame" Url="https://examples2.ext.net/" ShowMask="true" MaskMsg="Searching...">
</AutoLoad>
</ext:Panel>
<ext:Panel ForceLayout="true" HideBorders="true" runat="server" ID="frmAdminPanel"
Layout="Fit" Hidden="true">
<AutoLoad Mode="IFrame" Url="http://www.extjs.com/deploy/dev/docs/" ShowMask="true"
MaskMsg="Loading Home Page ...">
</AutoLoad>
</ext:Panel>
</Content>
</ext:Container>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
