TextInput to Label when editable is false

Well the title of this post says it all. I came across a lot of situations which required that some fields should be possible to edit for a certain group of users and some users of cource didn’t have these rights.

A textinput has a property editable but when I set this to false it still shows you the textinput box which I think looks like it’s still editable and doesn’t give the user the right feedback untill he tries to edit it which sounds kinda frustrating to me.

So to improve usability and a simple way to implement this ( not with states ) I decided to extend the textinput and show a label when editable is set to false.

Example - source

Disclaimer: Any edit rights should of course be checked on the back-end as well:)

6 Comment(s)

  1. On Jul 4, 2008, Christophe said:

    Reading this I was thinking of something a bit simpler like the following (the first child is the border that you want to avoid in non editable mode, TextInput actually does even have a border property but it is not protected just mx_internal…):

    import mx.controls.TextInput;

    public class MyTextInput
    extends TextInput
    private var _editableChanged:Boolean;

    public function MyTextInput()

    public override function set editable(value:Boolean):void
    if (value != super.editable) {
    _editableChanged = true;
    super.editable = value;

    protected override function commitProperties():void
    if (_editableChanged) {
    _editableChanged = false;
    getChildAt(0).visible = editable;

  2. On Jul 5, 2008, radekg said:

    Hah, I’ve been just doing exactly the same thing two days ago. But instead of adding new label on top of controls I’m just setting borderSides to none and backgroundAlpha to 0 when control is disabled.

  3. On Aug 22, 2008, Gerben Robijn said:

    Yours are simpler indeed but the reason why I used this method is that it will also be nicely truncated.

  4. On Jan 22, 2010, Brian said:

    Another possible solution is instead of using editable, set enabled=false and set disabledBackgroundColor to blend with whatever background you’re using

    I guess you still gotta set the borderStyle to none but you don’t have to mess with over riding anything

  5. On Jan 26, 2010, Gerben Robijn said:

    It’s not a bad thing to override. Otherwise they would have made it private:)

    Anyway your solutions has never been an option for me because of the gradient backgrounds.

  6. On Feb 5, 2010, Sameera Sandaruwan said:

    Step 1. On focusIn, left side of flex textinput control become light blue,
    Step 2. At the validation, entire control border become red and left side of the control become,

    thick red vertical line,
    Step 3. Now when I gradually delete additional letters from the textinput control, entire red

    outline border automatically removed, but I can see red think line of the left side of the textinput

    control is still there,

    My requirements are,
    1. Validation colors need to change.
    2. After validation, remain left red think vertical line need to change to normal focusIn

    color(light blue)
    Can anyone help me to achieve this, is that event fire, CSS changes, function overwrite.

    Thanks in advanced.

Post a Comment