4

これが私の質問を説明するための簡単なアプリケーションです。指示：

  1. 添付の Flex 4 コードを実行する
  2. 最初のフォーム項目に 0 を入力します (例: "Enter Speed (MPH)")。
  3. 2 番目のフォーム項目をクリックします
  4. エラー文字列が最初のフォーム項目の右側にあることに注意してください

質問: フォームの幅を固定したまま、エラー文字列を最初のフォーム アイテムのすぐ右に表示するにはどうすればよいですか (たとえば、現在の例では 400 ピクセルの固定フォーム幅を使用しています)。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            private function validateSpeed():void {
                var num:Number=Number(speedId.text);
                speedId.errorString="";

                if (speedId.text=="") {
                    speedId.errorString="This field is required.";  
                    return;
                } else if ( Number(speedId.text)<1000) {
                    speedId.errorString="The speed must be at least 1 MPH.";
                    return;
                } else if ( Number(speedId.text)>1e11) {
                    speedId.errorString="The speed cannot exceed 100 MPH.";
                    return;
                }
            }       
        ]]>
    </fx:Script>

    <s:Form width="600" >   
        <s:layout>
            <s:FormLayout gap="-10" horizontalAlign="center"/>
        </s:layout> 

        <s:FormItem id="speedFI" label="Enter Speed (MPH):" width="600" required="true">
            <s:TextInput id="speedId" width="195" textAlign="right"
                     restrict="0-9" maxChars="7"
                     focusOut="validateSpeed();"
                     toolTip="Enter a speed between 1 and 100 MPH."/>
        </s:FormItem>   

        <s:FormItem id="dummyFI" label="Dummy Label:" width="600" required="true">
            <s:TextInput id="dummyId" width="195" textAlign="center"
                     restrict="0-9" maxChars="7" prompt="Click here after entering 0 above."
                     toolTip="Dummy form item."/>
        </s:FormItem>           
    </s:Form>
</s:Application>
4

1 に答える 1

3

カスタム を作成することで、エラー メッセージの位置を制御できますFormItemSkin。

デフォルトFormItemSkinクラスの一部を次に示します。このスキンは「制約」の列/行を使用してさまざまなパーツを並べることに注意してください。列の定義を変更するか、「helpColumn」内のエラー メッセージの配置を変更できます。これを解決する方法は他にもたくさんありますが、スキン内で行う必要があるようです。

制約列/行宣言:

<s:layout>
    <s:FormItemLayout>
        <s:constraintColumns>
            <!--- The column containing the sequence label. -->
            <s:ConstraintColumn id="sequenceCol" />
            <!--- The column containing the FormItem's label. -->
            <s:ConstraintColumn id="labelCol" />
            <!--- The column containing the FormItem's content. -->
            <s:ConstraintColumn id="contentCol" width="100%"/>
            <!--- The column containing the FormItem's help content. -->
            <s:ConstraintColumn id="helpCol" maxWidth="200"/>
        </s:constraintColumns>         
        <s:constraintRows>
            <!--- @private -->
            <s:ConstraintRow id="row1" baseline="maxAscent:10" height="100%"/>
        </s:constraintRows>  
    </s:FormItemLayout>
</s:layout>

エラー メッセージを表示するために使用されるラベル オブジェクトを次に示します。次のようなものを使用して、ラベルの左端を入力フィールドに近づけるように設定できます: left="helpCol:10"(の代わりにhelpCol:27)。

<s:RichText id="errorTextDisplay" includeIn="errorStates"
            fontStyle="italic" fontWeight="normal" color="0xFE0000"
            left="helpCol:27" right="helpCol:10"
            bottom="row1:10" baseline="row1:0" 
            maxDisplayedLines="-1"/>
于 2013-02-23T03:51:29.377 に答える