Flex TextInput with disabled State

To skin a TextInput you can define a custom BorderSkin which you can create with the Flex Skin Design Extension. But what do you have to do to have a custom disabled skin?. With CSS you can only set the backgroundDisabledColor.

To have a custom disabled skin you have to subclass the TextInput control. In this class the setters for editable and enabled are overwritten to switch the stylename:

package controls
{
import mx.controls.TextInput;
 
public class ExtendedTextInput extends TextInput
{
override public function set enabled(value:Boolean):void
{
   super.enabled = value;
   selectStyle(value);
}
 
override public function set editable(value:Boolean):void
{
   super.editable = value;
   selectStyle(value);
}
 
private function selectStyle(enabled:Boolean):void
{
   styleName = enabled ? getStyle("enabledStyleName") as String : getStyle("disabledStyleName") as String;
}
 
}
}

The CSS to define reference to the BorderSkin the looks like this:

ExtendedTextInput
{
enabledStyleName:"enabledTI";
disabledStyleName:"nonEnabledTI";
}

.enabledTI
{
border-skin: ClassReference("TextInput_borderSkin");
}
.nonEnabledTI
{
border-skin: ClassReference("TextInput_borderSkinDisabled");
}

2 comments to Flex TextInput with disabled State

  • 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.

  • alexk

    I’ve found, that enabled style is never set properly when TextInput has no changes in overrided setters.
    This patch in css solves the problem:

    ExtendedTextInput
    {
    border-skin: ClassReference(“TextInput_borderSkin”);
    enabledStyleName:”ExtendedTextInput”;
    disabledStyleName:”nonEnabledTI”;
    }
    .nonEnabledTI
    {
    border-skin: ClassReference(“TextInput_borderSkinDisabled”);
    }