What's New?

Combine label alignement in FormLayout

  1. #1
    Jun 23, 2009, 8:42 AM

    Combine label alignement in FormLayout

    Hi everyone,

    I've add a formLayout to a tabpanel

    How to conbine in FormLayout control top and left alignment of label?

    thanks,
    Valeriano
  2. #2
    Jun 23, 2009, 3:01 PM

    RE: Combine label alignement in FormLayout

    You may have to post some markup on this question. That said, the FormLayout should get you your left aligned label if you use a horizontal anchor.

    <ext:Panel ID="Panel2" runat="server" AutoHeight="true" Title="Personal Information" FormGroup="true" BodyStyle="padding:5px;">
<Body>
  <ext:FormLayout ID="FormLayout1" runat="server">
  <ext:Anchor Horizontal="85%">
      <ext:TextField ID="TxtName" runat="server" FieldLabel="Name" Enabled="false" />
  </ext:Anchor>
    You could also look at use Multifield for more complex fields you want similarly aligned.

    <ext:Anchor Horizontal="85%">
    <ext:MultiField ID="MultiField7" runat="server" FieldClass="editableFieldLable" FieldLabel="400 - Vacation">
        <Fields>
            <ext:TextField ID="TxtVacation" runat="server" FieldLabel="400 - Vacation"  Enabled="false"/>
            <ext:Button ID="Button5" runat="server" Icon="Help">
                <ToolTips>
                    <ext:ToolTip ID="ToolTip3" runat="server" Title="400 Vacation" Html="400 vacation code " />
                </ToolTips>
            </ext:Button>
        </Fields>
    </ext:MultiField>
</ext:Anchor>
  3. #3
    Jun 24, 2009, 4:53 AM

    RE: Combine label alignement in FormLayout

    I want to make a form layout like this:


    http://picasaweb.google.com/sfvaleri...97708334836898


    <div style="text-align: left;" id="result_box" dir="ltr">how can I do it?

    thanks,
    valeriano


  4. #4
    Jun 24, 2009, 11:52 AM

    RE: Combine label alignement in FormLayout

    Hi valeriano,

    The following sample demonstrates the layout.

    Example

    <ext:Window 
    runat="server" 
    Title="My Layout" 
    Width="400" 
    AutoHeight="true"
    Closable="false"
    BodyStyle="padding:5px;background-color: #fff;">
    <Body>
        <ext:FormLayout runat="server" LabelSeparator=" ">
            <Anchors>
                <ext:Anchor Horizontal="100%">
                    <ext:TextField runat="server" FieldLabel="Label 1" />
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:TextField runat="server" FieldLabel="Label 2" />
                </ext:Anchor>
                <ext:Anchor Horizontal="100%" IsFormField="true">
                    <ext:Panel runat="server" Border="false" Header="false">
                        <Body>
                            <ext:ColumnLayout runat="server">
                                <ext:LayoutColumn ColumnWidth="0.3">
                                    <ext:Panel runat="server" Border="false" Header="false" BodyStyle="padding-right: 5px;">
                                        <Body>
                                            <ext:FormLayout runat="server" LabelAlign="Top" LabelSeparator=" ">
                                                <Anchors>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:TextField runat="server" FieldLabel="Label 3" />
                                                    </ext:Anchor>
                                                </Anchors>
                                            </ext:FormLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.4">
                                    <ext:Panel runat="server" Border="false" Header="false">
                                        <Body>
                                            <ext:FormLayout runat="server" LabelAlign="Top" LabelSeparator=" ">
                                                <Anchors>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:TextField runat="server" FieldLabel="Label 4" />
                                                    </ext:Anchor>
                                                </Anchors>
                                            </ext:FormLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.3">
                                    <ext:Panel runat="server" Border="false" Header="false" BodyStyle="padding-left: 5px;">
                                        <Body>
                                            <ext:FormLayout runat="server" LabelAlign="Top" LabelSeparator=" ">
                                                <Anchors>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:TextField runat="server" FieldLabel="Label 5" />
                                                    </ext:Anchor>
                                                </Anchors>
                                            </ext:FormLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                            </ext:ColumnLayout>
                        </Body>
                    </ext:Panel>
                </ext:Anchor>
                <ext:Anchor Horizontal="100%">
                    <ext:TextField runat="server" FieldLabel="Label 6" />
                </ext:Anchor>
                <ext:Anchor Horizontal="100%" IsFormField="true">
                    <ext:Panel runat="server" Border="false" Header="false">
                        <Body>
                            <ext:ColumnLayout runat="server">
                                <ext:LayoutColumn ColumnWidth="0.5">
                                    <ext:Panel runat="server" Border="false" Header="false" BodyStyle="padding-right: 5px;">
                                        <Body>
                                            <ext:FormLayout runat="server" LabelAlign="Top" LabelSeparator=" ">
                                                <Anchors>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:TextField runat="server" FieldLabel="Label 7" />
                                                    </ext:Anchor>
                                                </Anchors>
                                            </ext:FormLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                                <ext:LayoutColumn ColumnWidth="0.5">
                                    <ext:Panel runat="server" Border="false" Header="false">
                                        <Body>
                                            <ext:FormLayout runat="server" LabelAlign="Top" LabelSeparator=" ">
                                                <Anchors>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:TextField runat="server" FieldLabel="Label 8" />
                                                    </ext:Anchor>
                                                </Anchors>
                                            </ext:FormLayout>
                                        </Body>
                                    </ext:Panel>
                                </ext:LayoutColumn>
                            </ext:ColumnLayout>
                        </Body>
                    </ext:Panel>
                </ext:Anchor>                        
            </Anchors>
        </ext:FormLayout>
    </Body>
</ext:Window>
    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jun 24, 2009, 12:31 PM

    RE: Combine label alignement in FormLayout

    YES

    is what I was looking for

    Many thanks,
    Valeriano

Similar Threads

  1. Possible to combine Absolute and Anchor layouts?
    By dbassett74 in forum 1.x Help
    Replies: 5
    Last Post: Aug 25, 2009, 11:16 AM
  2. ext:Label in FormLayout
    By mrozik in forum 1.x Help
    Replies: 8
    Last Post: Jul 27, 2009, 5:50 PM
  3. How to hide a field with label in FormLayout
    By echo in forum 1.x Help
    Replies: 1
    Last Post: Feb 03, 2009, 6:44 AM
  4. FormLayout with label above of input
    By pkngan in forum 1.x Help
    Replies: 0
    Last Post: Oct 29, 2008, 1:12 PM

Posting Permissions