Jul 05, 2010, 1:06 PM
[CLOSED] Width of controls within card layout
Hello guys,
Congratulations on this nice new forum. I'm having trouble again with the card layout.
Widths on panels that are initially hidden will not initialize properly and thus will look weird
until you manually resize the browser a bit.
This in IE7 using the source I updated last friday from SVN.
Congratulations on this nice new forum. I'm having trouble again with the card layout.
Widths on panels that are initially hidden will not initialize properly and thus will look weird
until you manually resize the browser a bit.
This in IE7 using the source I updated last friday from SVN.
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" MonitorResize="true">
<Items>
<ext:BorderLayout runat="server">
<Center>
<ext:Panel runat="server" Unstyled="true" Layout="card" ID="CardPanel">
<Listeners>
<AfterRender Handler="" />
</Listeners>
<LayoutConfig>
<ext:CardLayoutConfig />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
Html="first page. click 'show' to go to second page" ForceLayout="true" AutoDoLayout="true"
Padding="10">
</ext:Panel>
<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
ForceLayout="true" AutoDoLayout="true" Padding="10">
<Content>
<ext:Panel Unstyled="true" runat="server">
<Items>
<ext:FieldSet Title="Fieldset" runat="server" Height="100" Layout="Anchor" Collapsible="true"
AutoWidth="true" MonitorResize="true" AutoHeight="true">
<Content>
<ext:TextArea runat="server" ID="TextArea1" AnchorHorizontal="100%" />
</Content>
</ext:FieldSet>
<ext:Panel runat="server" Layout="fit" Height="200" AutoWidth="false" MonitorResize="true"
Unstyled="true" AutoDoLayout="true" AutoScroll="true">
<Items>
<ext:GridPanel runat="server" AutoExpandColumn="Col1" AutoDoLayout="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="Col1" />
<ext:RecordField Name="Col2" />
<ext:RecordField Name="Col3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column DataIndex="Col1" Header="Col1" />
<ext:Column DataIndex="Col2" Header="Col2" Width="240" />
<ext:DateColumn DataIndex="Col3" Header="Col3" Width="100" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true" />
</View>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button Text="Button" Handler="" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Center>
<East Split="true">
<ext:Panel runat="server" Html="Click 'show' below to show the panel" Width="200">
<Buttons>
<ext:Button Text="show" runat="server" Handler="function(){ #{CardPanel}.layout.setActiveItem(1) }" />
</Buttons>
</ext:Panel>
</East>
</ext:BorderLayout>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
I also included a screenshot.
Last edited by geoffrey.mcgill; Jul 07, 2010 at 2:52 AM.