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");
}

Leave a Reply