1

I made this form, but as you can see the first column of fields are not properly aligned. I tried to do it with the graphical editor but it just won't do it.

flex form

Here is the code :

<mx:TitleWindow
    id="SearchTitleWindow"
    title="Recherche"
    showCloseButton="true"
    horizontalAlign="right"
    width="627.8656"
    height="201" x="267" y="275">

    <mx:VBox width="100%" height="116">
        <mx:HBox>
            <mx:FormItem label="Numéro voie : "  width="140.71146" height="21.007908">
                <mx:TextInput id="numVoie" width="41.916996" height="21.007908"/>
            </mx:FormItem>
            <mx:FormItem label="Nature voie : " >
                <mx:TextInput id="natVoie" width="100"/>
            </mx:FormItem>
            <mx:FormItem label="Nom voie* : " >
                <mx:TextInput id="nomVoie" width="163.91306" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox width="597.33203" height="20.98814">
            <mx:FormItem label="Complement :   "  width="599.3083" height="21.007908">
                <mx:TextInput id="Complement" width="497.92493" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox>
            <mx:FormItem label="Code postal* : " >
                <mx:TextInput id="codePostal" width="101.581024" height="21.996048"/>
            </mx:FormItem>
            <mx:FormItem label="Commune* : " >
                <mx:TextInput id="Commune" width="294.13046" height="21.007908"/>
            </mx:FormItem>
        </mx:HBox>
        <mx:HBox>
            <mx:FormItem label="Coordonnées : " >
                    <mx:TextInput id="coordOne" width="169.01187" height="21.007908"/>
            </mx:FormItem>
            <mx:FormItem label="   " >
                <mx:TextInput id="coordTwo" width="169.40714" height="21.007908"/>
            </mx:FormItem>
            <mx:Button id="geocoderTourneeSearchBtn"
                       styleName="button"
                       width="120"
                       label="Géocoder"/>
        </mx:HBox>
    </mx:VBox>

    <mx:ControlBar horizontalAlign="right" height="45">
        <mx:Button id="cancelTourneeSearchBtn"
                   styleName="button"
                   width="200"
                   label="Annuler"/>
        <mx:Button id="searchTourneeSearchBtn" 
                   styleName="button"
                   width="200"
                   label="Rechercher"/>
    </mx:ControlBar>
</mx:TitleWindow>

The weird height and width parameters have been set by the graphical editor. Any idea how do do it?

Thank you.

PS : I can only use flex SDK 3.5

4

2 回答 2

1

这里的问题是您没有Form在您提供的代码中的任何地方使用容器。

FlexForm用于FormItems计算最大标签的宽度。因此，它将能够调整每个标签的位置（或者可能是尺寸），FormItem以便标签可以右对齐。

您有一个复杂的表单，其中某些行上有多个表单项。我不清楚这将如何在获得正确的表单布局方面发挥作用。但我认为开发人员也可能已经预料到了这一点。

下面是如何在 MXML 中指定表单：

<mx:Form>
    <mx:FormItem label="label 1">
        <mx:TextInput id="textInput1" />
    </mx:FormItem>
    <mx:FormItem label="label 2">
        <mx:TextInput id="textInput2" />
    </mx:FormItem>
</mx:Form>

我不确定你应该如何处理FormItems同一行上的多个。我会尝试使用HBox包含 2 个或更多FormItem控件的。不过，我不会在这上面花太多时间。

您可能会发现使用带有行和列的基于约束的布局会使这更容易实现。Canvas容器支持布局约束，例如：上、下、左、右。它还允许您使用constrainColumns和constraintRows数组设置自己的网格。

于 2013-05-31T17:32:38.613 回答
0

实际上，这个问题是由于标签的宽度不同而发生的。我的项目中也遇到了同样的问题。我通过设置每个 formItem 标签的相等宽度来解决这个问题。您应该将每个 formItem 标签的宽度设置为最长标签的宽度。

在您的表单中，标签“Coordonnées”具有最大宽度。因此，您将每个 formItem 标签的宽度设置为“Coordonnées”标签的宽度。

于 2013-05-31T14:02:21.697 回答