[CLOSED] Design problem - how do I get "strech"/fill behaviour in Forms? and more

Page 1 of 2 12 LastLast
  1. #1

    [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.

    Click image for larger version. 

Name:	delme.png 
Views:	151 
Size:	38.5 KB 
ID:	2510

    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]
  2. #2
    Quote Originally Posted by wagger View Post
    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.
    Hi,

    Well, the .AutoHeight is not cure-all, it's just css "height : auto;" Please read the ExtJS docs about .AutoHeight.
    http://dev.sencha.com/deploy/dev/doc...ber=autoHeight

    Briefly, the ColumnLayout breaks .AutoHeight behavior by default. To avoid this please set .FitHeight="false" for the CoulmnLayout.

    Example
    <ext:Container ID="Container_Outer" runat="server" Layout="Column">
        <LayoutConfig>
            <ext:ColumnLayoutConfig FitHeight="false" />
        </LayoutConfig>
        <Items>
            <ext:Container ID="Container_LeftCol" ... AutoHeight="true">
  3. #3
    Quote Originally Posted by wagger View Post
    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%"?
    Generally, here is the similar situation, .AutoWidth is not cure-all also, please see
    http://dev.sencha.com/deploy/dev/doc...mber=autoWidth

    But in the case with fields (TextField, ComboBox, DateField, etc) .AutoWidth and .AutoHeight requires additional information.

    If you would look at, for example, ExtJS Ext.form.TextField class
    http://dev.sencha.com/deploy/dev/doc...form.TextField
    you will that there are no such config option as autoHeight and autoWidth ones.

    But TextField has these properties in Ext.Net.

    The reason is the following thing.

    We can't hide in the sub-class the public properties of its parent class. It's C# restriction.

    One of TextField's super-classes is the BoxComponen one, and this one has .AutoHeight and .AutoWidth property.

    But we simply can hide these porperties in JavaScript, therefore there are no these properties in the Ext.form.TextField class and others.

    So, please do not use these properties for fields.

    To manage fields width in the 'form' layout context, please use .AnchorHorizonal or set fixed .Width.
  4. #4
    Quote Originally Posted by wagger View Post
    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?
    The <ext:Container> doesn't support borders, please use <ext:Panel>, it supports.

    Regarding padding

    Please see .PaddingSummary, .Padding here
    https://examples1.ext.net/#/Layout/FormLayout/Overview/

    See .DefaultMargins here
    https://examples1.ext.net/#/Layout/V...out/VBox_Form/

    Also you could set default margins for items using <Defaults>.

    Example
    <ext:Panel ...>
        <Defaults>
            <ext:Parameter Name="margins" Value="10" Mode="Raw" />
        </Defaults>
        ...
    </ext:Panel>
  5. #5
    Quote Originally Posted by wagger View Post
    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?
    Nut sure what you mean by
    My question is therefore: am I thinking about this the correct way?
    Could you clarify?

    All controls which supports <Items> collection has the .Layout property. For example: Container, Panel, FormPanel, FieldSet, CompositeField, Toolbar, etc.

    Well, the idea - if a control can consist items it should have .Layout property to manage these items.

    Please note that, for example, the GridPanel control has <Items> collection, but doesn't support it.
  6. #6
    Quote Originally Posted by Daniil View Post
    Generally, here is the similar situation, .AutoWidth is not cure-all also, please see
    http://dev.sencha.com/deploy/dev/doc...mber=autoWidth

    But in the case with fields (TextField, ComboBox, DateField, etc) .AutoWidth and .AutoHeight requires additional information. ...
    Thanks for the answers. But could you expand on point nbr 2 - AnchorHorizontal?:


    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%"?
  7. #7
    Quote Originally Posted by wagger View Post
    Thanks for the answers. But could you expand on point nbr 2 - AnchorHorizontal?:
    Did you read the Post #3?
  8. #8
    Quote Originally Posted by Daniil View Post
    Could you clarify?

    All controls which supports <Items> collection has the .Layout property. For example: Container, Panel, FormPanel, FieldSet, CompositeField, Toolbar, etc.

    Well, the idea - if a control can consist items it should have .Layout property to manage these items.

    Please note that, for example, the GridPanel control has <Items> collection, but doesn't support it.

    What I mean is this:

    How do I layout items, usually forms, so that all elements extent to the full size in their parent container - in accordance to expected behaviour of course.

    So if I place a TextField, it should expand its width. If I place a TextArea it should expand both width and height. If the window or area that these controls are in are resized, they should follow.

    Have you ever used DevExpress Layout Control in WinForms? If you have, thats sort of the behaviour I am looking for. Right now its a lot of work to get a simple form to look good...
  9. #9
    Quote Originally Posted by Daniil View Post
    Did you read the Post #3?
    Yes I did =) And after some more testing I realize that the AutoWidth n the DateField messed it up. Once i removed that thing, the anchorHorizontal works as expected. Sorry =)
  10. #10
    Quote Originally Posted by wagger View Post
    What I mean is this:

    How do I layout items, usually forms, so that all elements extent to the full size in their parent container - in accordance to expected behaviour of course.

    So if I place a TextField, it should expand its width. If I place a TextArea it should expand both width and height. If the window or area that these controls are in are resized, they should follow.

    Have you ever used DevExpress Layout Control in WinForms? If you have, thats sort of the behaviour I am looking for. Right now its a lot of work to get a simple form to look good...
    I guess you more experienced in DevExpress than Ext.Net:)

    No, I have not dealt with DevExpress yet, but, I'm sure, the following example is not more difficult.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel runat="server" DefaultAnchor="100%">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField1" />
                        <ext:TextField runat="server" FieldLabel="TextField2" />
                        <ext:TextArea runat="server" FieldLabel="TextArea1" Anchor="100% -55" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Mar 31, 2011 at 9:04 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Oct 16, 2012, 9:53 AM
  2. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  3. [CLOSED] SelectBox: Problem with characters "<" and ">"
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 03, 2011, 6:43 AM
  4. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  5. Replies: 1
    Last Post: Apr 25, 2011, 4:07 AM

Tags for this Thread

Posting Permissions