The following example shows how you can use the backgroundDisabledColor style to customize the overlay color on a Flex TextInput control when the control’s enabled property is set to false.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/10/changing-the-background-color-of-a-disabled-flex-textinput-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="backgroundDisabledColor:" />
        <mx:ColorPicker id="colorPicker"
                selectedColor="white" />

        <mx:CheckBox id="checkBox"
                label="enabled:"
                labelPlacement="left" />
    </mx:ApplicationControlBar>

    <mx:TextInput text="The quick brown fox"
            backgroundDisabledColor="{colorPicker.selectedColor}"
            enabled="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Changing the background color of a disabled Flex TextInput control

  1. coco says:

    peter,
    Now i have a question:when i save my project,it will take me more time to finish it!at first time,it takes several seconds ,now it takes about 1 min! why does this status happen?how to solve this problem?
    coco

  2. peterd says:

    coco,

    Try cleaning your project in Flex Builder using the Project > Clean menu command, and see if that helps.
    Also, are you using Flex Builder 2 or Flex Builder 3 Beta (and if FB3, are you using Beta 1 or Beta 2?)

    Peter

  3. coco says:

    peter,

    It’s usefull!Thanks!I am now using FB2!
    coco

  4. Reiner says:

    //Declare a variable
    [Bindable]
    public var myborderColor: ColorPicker = new ColorPicker();

    //
    private function init():void
    {
    myborderColor:.selectedColor = Color.WHITE ;

    … …. in other function change the color
    myborderColor:.selectedColor = Color.RED ;

  5. Reiner says:

    //Declare a variable
    [Bindable]
    public var myborderColor: ColorPicker = new ColorPicker();

    private function init():void
    {
    myborderColor:.selectedColor = Color.WHITE ;

    … …. in other function change the color
    myborderColor:.selectedColor = Color.RED ;

    … mx:TextInput id=”myText” backgroundColor=”{numcasoborderColor.selectedColor}” …

  6. Thiyagarajan G says:

    Hi .. Peter..
    I am New to use Flex 4 .I want to know how to use 3-D Chart . If You show with some example it will be use full

    With Thanks
    Thiyagarajan.G

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree