apache-flex - TextInputフィールドの左側にDateFieldアイコンを配置します

Question

dateFieldに関しては、TextInputとIconがあります。アイコンをデフォルト状態のように右側に表示するのではなく、TextInputの左側に表示したいと思います。

誰かが私にこれについてのヒントを与えることができますか？

Answer 1

DateFieldはまだHaloコンポーネントであるため、子を変更できるように拡張する必要があります。新しいコンポーネントを作成し、DateFieldを拡張してから、createChildren関数とupdateDisplayList関数をオーバーライドする必要があります。DateFieldがどのように子を作成するかを確認し、それに応じて位置を変更します。updateDisplayList関数は、コンポーネントのサイズを変更するときに使用するため、子のサイズを適切に変更できます。

Answer 2

ここを見てください（ソースコードを参照）。オートサジェストコンポーネントがありますが、原則は同じです。または、これで十分です。

public class myDateField extends DateField
{
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.textInput.x=this.getChildAt(1).width;
        this.getChildAt(1).x = 0;
    }       
}

Answer 3

これが私がしたことです-J_A_Xで説明されているのと同じ解決策ですが、コードを使用すると、ActionScriptを初めて使用する場合、Adobeが位置を設定する方法は少し混乱すると思います。私はChRapOのアプローチが好きですが、MXDateFieldコンポーネントがこれらの要素の位置を設定する方法と一貫性を保つようにすることを選択しました。

私の拡張DateFieldクラス：

package com.escalationpoint.tagger.view.component
{
import mx.controls.DateField;
import mx.core.mx_internal;

use namespace mx_internal;


public class DateField extends mx.controls.DateField
{
    public function DateField()
    {
        super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // Unfortunate that we can't call super.super.updateDisplayList
        // since we're redoing work done in super.updateDisplayList.  Oh, well...
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        var w:Number = unscaledWidth;
        var h:Number = unscaledHeight;

        var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
        var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

        textInput.setActualSize(w - arrowWidth - 2, h);
        textInput.move(arrowWidth + 4, 0);

        downArrowButton.setActualSize(arrowWidth, arrowHeight);
        downArrowButton.move(0, Math.round((h - arrowHeight) / 2));
    }
    }
}

元のDateFieldコンポーネントのupdateDisplayListメソッドと比較してください。

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var w:Number = unscaledWidth;
    var h:Number = unscaledHeight;

    var arrowWidth:Number = downArrowButton.getExplicitOrMeasuredWidth();
    var arrowHeight:Number = downArrowButton.getExplicitOrMeasuredHeight();

    downArrowButton.setActualSize(arrowWidth, arrowHeight);
    downArrowButton.move(w - arrowWidth, Math.round((h - arrowHeight) / 2));

    textInput.setActualSize(w - arrowWidth - 2, h);
}