Combine label alignement in FormLayout

  1. #1

    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

    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

    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

    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
  5. #5

    RE: Combine label alignement in FormLayout

    YES

    is what I was looking for

    Many thanks,
    Valeriano

Similar Threads

  1. Combine script files
    By jchau in forum Feature Requests
    Replies: 6
    Last Post: Jul 05, 2011, 6:01 PM
  2. Possible to combine Absolute and Anchor layouts?
    By dbassett74 in forum 1.x Help
    Replies: 5
    Last Post: Aug 25, 2009, 11:16 AM
  3. ext:Label in FormLayout
    By mrozik in forum 1.x Help
    Replies: 8
    Last Post: Jul 27, 2009, 5:50 PM
  4. Replies: 1
    Last Post: Feb 03, 2009, 6:44 AM
  5. 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