Flex Text Input with icon inside like mac os x search text input

Question

I'm trying to extend the text input that comes in flex to support an icon, just like mac os x search text input has a grey circle aligned to the right, the text input has a addChild method, but it didn't work for me.

Is there some way to do this?

thanks in advance

Answer 1

I've found a solution :D here it's the code

The trick was override the updateDisplayList.

Happy hacking.

package
{
import flash.display.DisplayObject;

import mx.controls.Image;
import mx.controls.TextInput;
import mx.core.mx_internal;

use namespace mx_internal;

public class MyTextInput extends TextInput
{
    private var _image:Image;

    public function MyTextInput()
    {
        super();
    }

    override protected function createChildren():void
    {
        super.createChildren();

        _image = new Image();
        _image.source = "http://sstatic.net/so/img/replies-off.png",

        addChild(DisplayObject(_image));
    }

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

        this._image.width = 16;
        this._image.height = 16;

        this._image.x = this.width - this._image.width - 5;
        this._image.y = this.height - this._image.height;

        this.textField.width = this.width - this._image.width - 5;
    }
}
}