PDA

View Full Version : [CLOSED] Vbox and hbox layout not resizing to fill screen



rmelancon
Nov 20, 2014, 4:31 PM
Trying to use a combination of vbox and hbox layout to effectively have a "table" layout that resizes to the extents of the browser window. The end component will be in a control so I have coded the example that way. The result sizes to the width of the browser initially but then does not stretch/resize horizontally or vertically and nothing seems to stretch vertically.

Container page:


<%@ Page Language="vb" %>
<%@ Register TagName="uc" TagPrefix="alloc" Src="TestLayoutControl.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext2:ResourceManager ID="ResourceManager" runat="server" />

<form id="form1" runat="server">
<div>

<ext2:Panel Flex="1" runat="server" Title="Define Allocation" Layout="vboxlayout" >
<LayoutConfig>
<ext2:VBoxLayoutConfig Pack="Center" Align="Stretch"></ext2:VBoxLayoutConfig>
</LayoutConfig>
<Content>
<alloc:uc runat="server" ID="controlAllocations" />
</Content>
</ext2:Panel>

</div>
</form>
</body>
</html>


Control page:



<%@ Control Language="vb" %>

<ext2:Panel runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext2:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext2:Panel Flex="1" runat="server" Layout="HBoxLayout">
<LayoutConfig>
<ext2:HBoxLayoutConfig Align="Stretch"></ext2:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext2:Panel Flex="1" runat="server" ID="pnlAllocationChart" Title="Allocation Chart" ></ext2:Panel>
<ext2:Panel Flex="1" runat="server" ID="pnlDetails" Title="Allocation Details"></ext2:Panel>
</Items>
</ext2:Panel>
<ext2:Panel Flex="1" runat="server" ID="pnlAllocationGrid" Title="Allocation Grid">
<Items>
<ext2:GridPanel runat="server" ID="grdAllocations">
<Store>
<ext2:Store runat="server" ID="StoreAllocations">
<Fields>
<ext2:ModelField Name="ID"></ext2:ModelField>
<ext2:ModelField Name="Description"></ext2:ModelField>
</Fields>
</ext2:Store>
</Store>
<ColumnModel>
<Columns>
<ext2:Column runat="server" ID="colID" DataIndex="ID"></ext2:Column>
<ext2:Column runat="server" ID="colDescription" DataIndex="Description"></ext2:Column>
</Columns>
</ColumnModel>
</ext2:GridPanel>
</Items>
</ext2:Panel>
</Items>
</ext2:Panel>

Daniil
Nov 20, 2014, 7:07 PM
Hi @rmelancon,

I think you should use a Viewport as a top level container inside <form>. It automatically sizes itself to take all viewable space.