Changing the background color of a disabled TextArea control in Flex

The following example shows how you can change the background color of a disabled Flex TextArea control by setting the use the backgroundDisabledColor style.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/17/changing-the-background-color-of-a-disabled-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:String id="lorem" source="lorem.txt" />
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundDisabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="textArea"
            text="{lorem}"
            backgroundDisabledColor="{colorPicker.selectedColor}"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />
 
</mx:Application>

[GoogleAdsWide]

View source is enabled in the following example.

You can also set the backgroundDisabledColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/17/changing-the-background-color-of-a-disabled-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:String id="lorem" source="lorem.txt" />
 
    <mx:Style>
        TextArea {
            backgroundDisabledColor: haloSilver;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="textArea"
            text="{lorem}"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />
 
</mx:Application>

Or, you can set the backgroundDisabledColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/17/changing-the-background-color-of-a-disabled-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            private function colorPicker_change(evt:ColorPickerEvent):void {
                textArea.setStyle("backgroundDisabledColor", evt.color);
            }
        ]]>
    </mx:Script>
 
    <mx:String id="lorem" source="lorem.txt" />
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundDisabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:TextArea id="textArea"
            text="{lorem}"
            backgroundDisabledColor="#CCCCCC"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />
 
</mx:Application>

3 thoughts on “Changing the background color of a disabled TextArea control in Flex

  1. the new s:TextArea doesn’t have backgroundDisabledColor what is the best way to achieve that with the new component?

    1. @Tam,

      You can either create a custom skin and set the contentBackgroundColor style in the disabled state (although that probably isn’t very reusable — although you could extend the Spark TextArea class and add an additional disabledContentBackgroundColor style and then create a custom skin which applies the custom style).

      Or, if you want the easiest solution, I’d probably just use some clever little Advanced CSS like the following which sets the contentBackgroundColor style in the default and disabled states:

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx">
       
          <fx:Style>
              @namespace s "library://ns.adobe.com/flex/spark";
              @namespace mx "library://ns.adobe.com/flex/mx";
       
              s|TextArea {
                  contentBackgroundColor: haloGreen;
              }
              s|TextArea:disabled {
                  contentBackgroundColor: red;
              }
          </fx:Style>
       
          <s:Panel id="pnl"
                  title="Spark Panel title"
                  horizontalCenter="0" verticalCenter="0">
              <s:controlBarContent>
                  <s:CheckBox id="cb"
                          label="enabled"
                          selected="true" />
              </s:controlBarContent>
              <s:TextArea id="txtArea"
                      text="The quick brown fox jumps over the lazy dog"
                      enabled="{cb.selected}" />
          </s:Panel>
       
      </s:Application>

      Peter

Comments are closed.