PDA

View Full Version : [CLOSED] ColumnLayout in Viewport Frustration



logicspeak
Jan 29, 2014, 1:04 AM
All I want is for a panel with columnlayout to take up the full screen for all columns. Putting it inside a viewport with layout = fitlayout seemingly is the right solution (isn't that what fitlayout is for???). But when I do that, the column panels each only take up the height of what is in the panel and no more.

Here's a very simple example to show what I mean:



<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="columns" runat="server" Layout="ColumnLayout">
<Items>
<ext:Panel runat="server" ColumnWidth="0.5" Border="true" Html="West Gutter">
</ext:Panel>
<ext:Panel runat="server" Width="1000" Html="Center"></ext:Panel>
<ext:Panel runat="server" ColumnWidth="0.5" Border="true" Html="East Gutter"></ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>


I've tried a Border Layout, but it has to have defined widths for the west and east, but they are just gutters for the content in the middle, which should be of defined width, so that's out. Please help! Frustrations abound. Essentially, I'm trying to get the code rewritten in v2.x for the attached example.

Thanks,
Jason
7540

geoffrey.mcgill
Jan 29, 2014, 4:53 AM
Personally I'd use the HBoxLayout instead of ColumnLayout. ColumLayout has basically been deprecated in 2.x, in favour of using HBoxLayout.

The following sample demonstrates your sample reconfigured to use HBoxLayout.

Example


<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Title="Main" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Flex="1" Border="true" Html="West Gutter" />
<ext:Panel runat="server" Width="1000" Html="Center" />
<ext:Panel runat="server" Flex="1" Border="true" Html="East Gutter" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Hope this helps.

logicspeak
Jan 29, 2014, 8:50 PM
It helps. That's exactly what I did to get it working. Thanks so much!

Feel free to mark as solved.
JRE