What's New?

[CLOSED] Label alignment

  1. #1
    Sep 09, 2015, 3:29 PM

    [CLOSED] Label alignment

    in v 1.7, the code below built a panel where the label was on TOP of the text (see attachment). In v3.2, it doesnt work anymore. Also, i played with the VBOX and HBOX layouts but found that i needed to hardcode the height to make this work.

    So my two questions are:
    1. how can align the labels to the top? I tried Fieldcontainer with a default alignfieldlabel as top but that didnt work and i also tried AnchorHorizontal="-5". Neither worked.
    2. How can i make the panel size automatically. i dislike having to hardcode a height for the column layout. should be using a VBOX and then a set of HBOXs inside instead of the column layout?

    Thanks,
    /Z


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StaticTest.aspx.cs" Inherits="Crystal.Views.Support.StaticTest" %>  
<%@ 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  lang="en" 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="ResourceManager" runat="server" />


        <ext:Viewport ID="Viewport1" runat="server" AutoScroll="True" Layout="FitLayout">          
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server"  AutoWidth = "true" Anchor="100% 100%" AutoHeight="true" AutoScroll="true">
                    <Items>
                        <ext:Panel ID="Panel1" 
                            runat="server" 
                            Title="Personal" 
                            Border="false" 
                            BodyPadding="3"
                            AutoHeight="true"
                            Icon="User">
                            <Items>
                                <ext:FormPanel ID="FormPanel2" runat="server" Title="Details" BodyPadding="10" AutoHeight="true" AutoWidth="true">
                                    <Items>
                                        <ext:Container ID="Container2" runat="server" Layout="Column" Height="255">
                                            <Items>
                                                <ext:Container ID="Container3" runat="server" LabelAlign="Top"  Layout="Form" ColumnWidth=".3">
                                                    <Items>
                                                        <ext:Image ID="ImageUserImage"  OverCls="hand-pointer" Height="142" Width="142" runat="server"/>
                                                        <ext:Label ID="Label1" runat="server" Text="" Cls="red-text" /> 
                                                    </Items>
                                                </ext:Container>
                                                <ext:Container ID="Container4" runat="server" LabelAlign="Top" Layout="Form" ColumnWidth=".25">
                                                    <Items>
                                                        <ext:Hidden ID="TextField2" runat="server"  />
                                                        <ext:Hidden ID="TextField3" runat="server"  />
                                                        <ext:TextField ID="TextField4" IndicatorText="*" IndicatorCls="red-text" runat="server" MaxLength="50" FieldLabel="First Name" AnchorHorizontal="95%"   AllowBlank="false" />
                                                        <ext:RadioGroup ID="RadioGroup5" Vertical="false" IndicatorText="*" IndicatorCls="red-text" AllowBlank="false" runat="server" FieldLabel="Radio Test" ColumnsNumber="2" AnchorHorizontal="95%">
                                                            <Items>
                                                                <ext:Radio runat="server" ID="Y" BoxLabel="Yes" />
                                                                <ext:Radio runat="server" ID="N" BoxLabel="No" />
                                                            </Items>
                                                        </ext:RadioGroup>
                                                        <ext:TextField ID="TextField6" MaxLength="50" runat="server"  Disabled="true" FieldLabel="Number1" AnchorHorizontal="95%" />
                                                    </Items>
                                                </ext:Container>
                                                <ext:Container ID="Container5" runat="server" LabelAlign="Top" Layout="Form" ColumnWidth=".2">
                                                    <Items>
                                                        <ext:TextField ID="TextField7" runat="server" MaxLength="1" FieldLabel="Middle Initial" AnchorHorizontal="95%" />
                                                        <ext:DateField ID="DateField8" runat="server" IndicatorText="*" IndicatorCls="red-text" FieldLabel="Hire Date" AllowBlank="false" Format="MM/dd/yyyy"  AnchorHorizontal="95%"/>
                                                        <ext:DateField ID="DateField9" runat="server" FieldLabel="Re-Hire Date" Format="MM/dd/yyyy"  AnchorHorizontal="95%"/>
                                                        <ext:TextField ID="TextField10" Disabled="true" MaxLength="50" runat="server" FieldLabel="Number2" Note="Uses Number1 if blank" AnchorHorizontal="95%" />
                                                    </Items>
                                                </ext:Container>
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Panel>
                           
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: Untitled.png  Views: 21  Size: 2.1 KB  ID: 24220  
    Last edited by Daniil; Sep 11, 2015 at 6:55 AM. Reason: [CLOSED]
  2. #2
    Sep 09, 2015, 4:41 PM
    Hi @Z,

    1. how can align the labels to the top? I tried Fieldcontainer with a default alignfieldlabel as top but that didnt work and i also tried AnchorHorizontal="-5". Neither worked.
    Please use AnchorLayout instead of FormLayout. Here is a related post.
    http://forums.ext.net/showthread.php...l=1#post274394

    2. How can i make the panel size automatically. i dislike having to hardcode a height for the column layout. should be using a VBOX and then a set of HBOXs inside instead of the column layout?
    I removed Height="255" of the Container with ColumnLayout and seems it sizes well. Here is a bit cleaned up version of your sample. I tried to leave layout-related things only.

    Example
    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:TabPanel runat="server">
                    <Items>
                        <ext:Panel
                            runat="server"
                            Title="Personal"
                            Border="false"
                            BodyPadding="3"
                            Icon="User">
                            <Items>
                                <ext:FormPanel runat="server" Title="Details" BodyPadding="10">
                                    <FieldDefaults LabelAlign="Top" />
                                    <Items>
                                        <ext:Container runat="server" Layout="ColumnLayout">
                                            <Items>
                                                <ext:Container runat="server" ColumnWidth=".3">
                                                    <Items>
                                                        <ext:Image runat="server" Height="142" Width="142" />
                                                        <ext:Label runat="server" />
                                                    </Items>
                                                </ext:Container>
                                                <ext:Container runat="server" Layout="AnchorLayout" ColumnWidth=".25" DefaultAnchor="95%">
                                                    <Items>
                                                        <ext:TextField
                                                            runat="server"
                                                            IndicatorText="*"
                                                            FieldLabel="First Name" />

                                                        <ext:RadioGroup
                                                            runat="server"
                                                            IndicatorText="*"
                                                            FieldLabel="Radio Test"
                                                            ColumnsNumber="2">
                                                            <Items>
                                                                <ext:Radio runat="server" ID="Y" BoxLabel="Yes" />
                                                                <ext:Radio runat="server" ID="N" BoxLabel="No" />
                                                            </Items>
                                                        </ext:RadioGroup>

                                                        <ext:TextField runat="server" Disabled="true" FieldLabel="Number1" />
                                                    </Items>
                                                </ext:Container>
                                                <ext:Container runat="server" Layout="AnchorLayout" ColumnWidth=".2" DefaultAnchor="95%">
                                                    <Items>
                                                        <ext:TextField runat="server" FieldLabel="Middle Initial" />
                                                        <ext:DateField runat="server" FieldLabel="Hire Date" IndicatorText="*" />
                                                        <ext:DateField runat="server" FieldLabel="Re-Hire Date" />
                                                        <ext:TextField runat="server" FieldLabel="Number2" Disabled="true" Note="Uses Number1 if blank" />
                                                    </Items>
                                                </ext:Container>
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    By the way, I think you can get rid of the Panel which is inside TabPanel. You could put FormPanel directly into TabPanel. Less components - better performance.

    Also there is something wrong with the RadioGroup's IndicatorText="*". It appears in a wrong position. Could you, please, start a new forum thread if you need it working properly.
  3. #3
    Sep 10, 2015, 6:28 PM
    Thxs. Works.
    /Z

Similar Threads

  1. [CLOSED] Chart axis label alignment
    By dataworks in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 19, 2014, 3:51 PM
  2. [CLOSED] Label alignment and justification
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 15, 2012, 5:06 PM
  3. [CLOSED] ext:Label width/alignment in Anchor
    By mrozik in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 28, 2009, 10:14 AM
  4. [CLOSED] Alignment of Label
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 24, 2009, 2:09 PM
  5. [CLOSED] Label text vertical alignment
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 17, 2009, 12:04 PM

Posting Permissions