Mar 30, 2011, 1:15 PM
[CLOSED] Design problem - how do I get "strech"/fill behaviour in Forms? and more
I am designing some forms and feel that I must be missing something since it is a lot of manual pixel-editing required to make the elements align nicely.
In desktop applications I am used to the stretch/fill, so I can say that a TextField should stretch out to the full width of whatever container it is in. I thought that AutoWidth and AutoHeight should take care of that, but they don't.
I will post two pieces of code; one is the Page on which I place a UserControl, the other is the UserControl that contains the Form and in which I have design problems. If you run the code and look at it you'll see that I define, in pixels, some elements (like the DateField). I am also attaching a picture on how it looks with the code below.
Questions:
1) AutoHeight?
The ext:Containers have a Property called AutoHeight. Im thinking that the Container should then automatically adapts its Height depending on its Children. It doesnt. I have to set a fixed Height for the Container to have an Height at all:
Working, Container has height:
Im missing something here, please explain =)
2) DateField; AutoWidth and AnchorHorizontal?
As you can see there are DateFields in the form and as you can see on the picture provided they are not aligned with the rest of the controls even though the first one (DateField_StartDate) has the same Property set that for example the some of MultiCombos have, the AnchorHorizontal:
So, why does the DateField have a Property that doesnt seem to affect it, and why does the MultiCombo expand beyond the Container if I dont use AnchorHorizontal="97%"?
3) Padding/borders in a Container?
As can be seen in the picture, without the AnchorHorizontal or setting the Controls width specifically in pixels, there is no spacing between the control and the next column. How can this be achieved?
4) Different techniques?
I have of course been reading the examples-page a lot, and there are many different ways it seem to do layot. Almost all Controls have the Layout property that you can set to different things. My question is therefore: am I thinking about this the correct way?
The code:
In desktop applications I am used to the stretch/fill, so I can say that a TextField should stretch out to the full width of whatever container it is in. I thought that AutoWidth and AutoHeight should take care of that, but they don't.
I will post two pieces of code; one is the Page on which I place a UserControl, the other is the UserControl that contains the Form and in which I have design problems. If you run the code and look at it you'll see that I define, in pixels, some elements (like the DateField). I am also attaching a picture on how it looks with the code below.
Questions:
1) AutoHeight?
The ext:Containers have a Property called AutoHeight. Im thinking that the Container should then automatically adapts its Height depending on its Children. It doesnt. I have to set a fixed Height for the Container to have an Height at all:
Working, Container has height:
<ext:Container ID="Container_LeftCol" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".5" Height="150">
Not working, no height:<ext:Container ID="Container_LeftCol" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".5" AutoHeight="true">
I have tried AutoHeight on all Containers with no luck.Im missing something here, please explain =)
2) DateField; AutoWidth and AnchorHorizontal?
As you can see there are DateFields in the form and as you can see on the picture provided they are not aligned with the rest of the controls even though the first one (DateField_StartDate) has the same Property set that for example the some of MultiCombos have, the AnchorHorizontal:
<ext:DateField ID="DateField_StartDate" runat="server" AutoWidth="true" FieldLabel="Giltig från" AnchorHorizontal="97%"></ext:DateField>
In the case of MultiCombo, the AnchorHorizontal is required if not the MultiCombo should expand beyond the width of the "column"/Container.So, why does the DateField have a Property that doesnt seem to affect it, and why does the MultiCombo expand beyond the Container if I dont use AnchorHorizontal="97%"?
3) Padding/borders in a Container?
As can be seen in the picture, without the AnchorHorizontal or setting the Controls width specifically in pixels, there is no spacing between the control and the next column. How can this be achieved?
4) Different techniques?
I have of course been reading the examples-page a lot, and there are many different ways it seem to do layot. Almost all Controls have the Layout property that you can set to different things. My question is therefore: am I thinking about this the correct way?
The code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register TagPrefix="CP" TagName="TestControl" Src="TestControl.ascx" %>
<!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>Test</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<CP:TestControl runat="server" />
</form>
</body>
</html>
UserControl:<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestControl.ascx.cs" Inherits="WebApplicationExtNetTest.TestControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:FormPanel ID="FormPanel1" runat="server" Height="630" Width="550" Title="TEstinfo" Header="true" Padding="5" MonitorResize="true">
<BottomBar runat="server">
<ext:Toolbar ID="Toolbar_legitimation" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill_legitimation" runat="server" />
<ext:Button ID="btnCreateUpdateLegitimation" Icon="Disk" Text="Spara" runat="server" >
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Content>
<ext:FieldSet ID="FieldSet_legitimation"
runat="server"
Title="Välj en testsak"
AutoHeight="true"
Layout="Form">
<Items>
<ext:CompositeField ID="CompositeField8" runat="server" FieldLabel="Testsak" AnchorHorizontal="100%">
<Items>
<ext:ComboBox runat="server" EmptyText="Välj" ID="ComboBox_LegTemplate"
Editable="false"
DisplayField="LegitimationTemplateName"
ValueField="LegitimationTemplateId"
TypeAhead="true"
ForceSelection="true"
Resizable="true"
SelectOnFocus="true">
</ext:ComboBox>
</Items>
</ext:CompositeField>
</Items>
</ext:FieldSet>
<ext:FieldSet ID="FieldSet2"
runat="server"
Title="Ej förändringsbar data"
AutoHeight="true"
Layout="Form">
<Items>
<ext:Label ID="lblRoutine" runat="server" FieldLabel="Code" Text="KO"></ext:Label>
<ext:Label ID="lblCostPlace" runat="server" FieldLabel="Payplace" Text="Some text "></ext:Label>
</Items>
</ext:FieldSet>
<ext:FieldSet ID="FieldSet_editable"
runat="server"
Title="Förändringsbar data"
AutoHeight="true">
<Items>
<ext:Container ID="Container_Outer" runat="server" Layout="Column" >
<Items>
<ext:Container ID="Container_LeftCol" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".5" Height="150">
<Items>
<ext:DateField ID="DateField_StartDate" runat="server" AutoWidth="true" FieldLabel="Giltig från" AnchorHorizontal="97%"></ext:DateField>
<ext:MultiCombo ID="MultiCombo1" runat="server" FieldLabel="Demands 1"></ext:MultiCombo>
<ext:MultiCombo ID="MultiCombo3" runat="server" FieldLabel="Help" AnchorHorizontal="97%"></ext:MultiCombo>
<ext:SpinnerField ID="SpinnerField1" DefaultValue="0" runat="server" Text="0" Width="100" FieldLabel="Max # something"></ext:SpinnerField>
<ext:MultiCombo ID="MultiCombo5" runat="server" FieldLabel="Something else" AnchorHorizontal="97%"></ext:MultiCombo>
</Items>
</ext:Container>
<ext:Container ID="Container_RightCol" runat="server" LabelAlign="Left" Layout="Form" ColumnWidth=".5" >
<Items>
<ext:DateField ID="DateField_EndDate" runat="server" AutoWidth="true" FieldLabel="Giltig till"></ext:DateField>
<ext:MultiCombo ID="MultiCombo2" runat="server" FieldLabel="Some stuff" AnchorHorizontal="97%"></ext:MultiCombo>
<ext:MultiCombo ID="MultiCombo4" runat="server" FieldLabel="Other stuff" AnchorHorizontal="97%"></ext:MultiCombo>
<ext:SpinnerField ID="SpinnerField2" DefaultValue="0" Text="0" runat="server" Width="100" FieldLabel="test text"></ext:SpinnerField>
<ext:MultiCombo ID="MultiCombo6" runat="server" FieldLabel="test" ></ext:MultiCombo>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:FieldSet>
</Content>
</ext:FormPanel>
Last edited by Daniil; Apr 09, 2011 at 12:48 PM.
Reason: [CLOSED]