PDA

View Full Version : [CLOSED] Window Height and Layouts



cwolcott
Oct 03, 2012, 4:46 PM
I thought I understood this. Here is a simple example that I can not get to display properly. I want the window to size correctly based on the contents. I do not want to give it a height attribute.



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Understanding Layouts</title>
<style type="text/css">
.headerFooter
{
background-color: #00D200;
text-align: center;
font-weight: bold;
color: White;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window runat="server" Title="Data Request" Icon="Application" Layout="FitLayout"
BodyPadding="5">
<Items>
<ext:Panel runat="server" Region="Center" Layout="FitLayout" BodyPadding="5"
Border="false">
<Items>
<ext:Panel runat="server" Region="North" Html="Center Header"
BodyCls="headerFooter" />
<ext:Panel runat="server" Region="Center" Layout="AutoLayout"
BodyPadding="5" Border="false">
<Items>
<ext:TextField runat="server" FieldLabel="Field #1"
LabelWidth="60" EmptyText="Fill it out ..." />
<ext:TextField runat="server" FieldLabel="Field #2"
LabelWidth="60" EmptyText="Fill it out ..." />
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="South" Html="Center Footer"
BodyCls="headerFooter" />
</Items>
</ext:Panel>
</Items>
</ext:Window>
</body>
</html>


Image 1: Window after executing the code. Why can't I see the footer?
Image 2: When I resize the window the header panel takes the entire area.

48784879

Hopefully once I get this corrected I can adapt it to my real form.

geoffrey.mcgill
Oct 03, 2012, 7:21 PM
Here's a few comments in <--.

If you remove each line with the "<--", then your sample should work.

The main problem was just seeing .Layout="fit", then adding multiple child items. A FitLayout requires only one child component, otherwise you might get strange results.

Example (w/comments)


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Example</title>
<style type="text/css">
.headerFooter {
background-color : #00D200;
text-align : center;
font-weight : bold;
color : white;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />


<ext:Window
runat="server"
Title="Data Request"
Icon="Application"
Layout="FitLayout"
BodyPadding="5">
<Items>
<ext:Panel
runat="server"
Region="Center"
Layout="FitLayout" <-- FitLayout only works with one child in <Items>
BodyPadding="5"
Border="false">
<Items>
<ext:Panel
runat="server"
Region="North" <-- Not Required
Html="Center Header"
BodyCls="headerFooter"
/>
<ext:Panel
runat="server"
Region="Center" <-- Not Required
Layout="AutoLayout" <-- Not Required (default)
BodyPadding="5"
Border="false">
<Items>
<ext:TextField
runat="server"
FieldLabel="Field #1"
LabelWidth="60"
EmptyText="Fill it out ..."
/>
<ext:TextField
runat="server"
FieldLabel="Field #2"
LabelWidth="60"
EmptyText="Fill it out ..."
/>
</Items>
</ext:Panel>
<ext:Panel
runat="server"
Region="South" <-- Not Required
Html="Center Footer"
BodyCls="headerFooter"
/>
</Items>
</ext:Panel>
</Items>
</ext:Window>
</body>
</html>

cwolcott
Oct 04, 2012, 1:39 PM
Please go ahead a close the thread. After getting a good night sleep and playing around with Layout -> BorderLayout -> Regions Weights (http://examples2.ext.net/#/Layout/BorderLayout/Regions_Weights/) I am beginning to get a grip on this. I will now try to apply regions (West, East, South) to my existing form. Hopefully it will be a good day.