What's New?

[CLOSED] Form Layout problem

  1. #1
    Nov 15, 2011, 10:18 AM

    [CLOSED] Form Layout problem

    Hi

    I have a form with two columns (columnlayout), each having some fields. Is it possible witout specifying the width of each field to align them, something like
    https://examples1.ext.net/#/Getting_...nent_Overview/ in Form Fields, where it's accomplished with "Defaultanchor".

    Here is my example:
    <%@ 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>
<head id="Head1" runat="server">
    <title>Test</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" RemoveViewState="true"
        InitScriptMode="Inline" />
    <ext:Window ID="MainWindow" runat="server" Modal="true" Height="350" Width="650">
        <Items>
            <ext:FormPanel ID="Form_NewTask" Width="630" Height="350" Frame="true">
                <Items>
                    <ext:ColumnLayout>
                        <Columns>
                            <ext:LayoutColumn ColumnWidth="0.75">

                                <ext:FieldSet Title="Fieldset 1">
                                    <Items>

                                        <ext:DateField runat="server" FieldLabel="date">
                                        </ext:DateField>
                                        <ext:TextArea runat="server" FieldLabel="textarea">
                                        </ext:TextArea>
                                       
                                        <ext:DateField runat="server" FieldLabel="date field">
                                        </ext:DateField>
                                        <ext:NumberField runat="server" FieldLabel="numberfield" AllowNegative="false" AllowBlank="false">
                                        </ext:NumberField>
                                       
                                    </Items>
                                </ext:FieldSet>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn>
                                <ext:Panel Title="Details" FormGroup="true" BodyBorder="true" Width="300">
                                    <Items>
                                        <ext:Checkbox runat="server" FieldLabel="activate" Checked="false">
                                        </ext:Checkbox>
                                        <ext:FieldSet runat="server" Title="Field set 2" Disabled="true">
                                            <Items>
                                                <ext:TextArea runat="server" FieldLabel="text area">
                                                </ext:TextArea>
                                                <ext:NumberField runat="server" FieldLabel="numberfield 2" AllowNegative="false">
                                                </ext:NumberField>
                                                <ext:DateField runat="server" FieldLabel="date field" Format="dd.MM.yyyy">
                                                </ext:DateField>
                                                <ext:TextField runat="server" FieldLabel="textfield ">
                                                </ext:TextField>
                                            </Items>
                                        </ext:FieldSet>
                                    </Items>
                                </ext:Panel>
                            </ext:LayoutColumn>
                        </Columns>
                    </ext:ColumnLayout>
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: pscreen.png  Views: 188  Size: 12.3 KB  ID: 3444  
    Last edited by Daniil; Nov 15, 2011 at 1:11 PM. Reason: [CLOSED]
  2. #2
    Nov 15, 2011, 11:52 AM
    Hi,

    A FieldSet is a container, so, you can set up a layout for it. I mean a FormLayout.

    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>
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager  runat="server" />
        <ext:Window runat="server" Height="350" Width="650">
            <Items>
                <ext:FormPanel 
                    runat="server" 
                    Width="630" 
                    Height="350" 
                    Layout="ColumnLayout">
                    <Items>
                        <ext:FieldSet 
                            runat="server" 
                            Title="Fieldset 1" 
                            Layout="FormLayout" 
                            DefaultAnchor="100%">
                            <Items>
                                <ext:DateField runat="server" FieldLabel="date" />
                                <ext:TextArea runat="server" FieldLabel="textarea" />
                                <ext:DateField runat="server" FieldLabel="date field" />
                                <ext:NumberField runat="server" FieldLabel="numberfield" />
                            </Items>
                        </ext:FieldSet>
                        <ext:Panel 
                            runat="server" 
                            ColumnWidth="0.5" 
                            Title="Details" 
                            FormGroup="true" 
                            BodyBorder="true"
                            Layout="FormLayout">
                            <Items>
                                <ext:Checkbox runat="server" FieldLabel="activate" />
                                <ext:FieldSet 
                                    runat="server" 
                                    Title="Fieldset 2"
                                    Disabled="true" 
                                    Layout="FormLayout" 
                                    DefaultAnchor="100%">
                                    <Items>
                                        <ext:DateField runat="server" FieldLabel="date" />
                                        <ext:TextArea runat="server" FieldLabel="textarea" />
                                        <ext:DateField runat="server" FieldLabel="date field" />
                                        <ext:NumberField runat="server" FieldLabel="numberfield" />
                                    </Items>
                                </ext:FieldSet>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>
  3. #3
    Nov 15, 2011, 12:26 PM
    Thanks Daniil, it's exactly how it should be displayed.

    However I find it sometimes confusing with the layouts, is there any documentation you can point me to? or at least for now what's the difference with the ELement Columnlayout and the attribute? i.e. <ColumnLayout></ColumnLayout> and <panel Layout="Columnlayout"></panel>
  4. #4
    Nov 15, 2011, 12:55 PM
    You can refer ExtJS
    http://docs.sencha.com/ext-js/3-4/
    and Ext.Net docs
    http://docs.ext.net

    or at least for now what's the difference with the ELement Columnlayout and the attribute? i.e. <ColumnLayout></ColumnLayout> and <panel Layout="Columnlayout"></panel>
    They are identically rendered to a client, but, for me, using the Layout property is more clear (looks clear) and light-weight (you don't need to use a layout control).

    To specify Layout options, you can use LayoutConfig and set up respective properties of layout items.

    In addition, we have totally removed all layout controls in Ext.Net 2.
  5. #5
    Nov 15, 2011, 1:09 PM
    many thanks, it's much clear now. you can mark this thread closed/resolved

Similar Threads

  1. [CLOSED] Form Layout Spacing in IIS
    By CMA in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 14, 2010, 8:16 AM
  2. [CLOSED] form layout with composite field problem
    By dev in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: Aug 31, 2010, 8:42 AM
  3. [CLOSED] GridPanel in Form Layout
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 09, 2010, 1:44 AM
  4. [CLOSED] [1.0] Form Status Panel in a Fit Layout problem
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 28
    Last Post: Jan 26, 2010, 9:54 AM
  5. [CLOSED] Need help with form layout
    By CSG in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 08, 2009, 6:54 AM

Tags for this Thread

Posting Permissions