Flex Examples
The following example shows how you can customize the background color of a disabled Flex List control by setting the backgroundDisabledColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/17/changing-the-background-color-of-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="enabled:">
<mx:CheckBox id="checkBox"
selected="true" />
</mx:FormItem>
<mx:FormItem label="backgroundDisabledColor:">
<mx:ColorPicker id="colorPicker"
selectedColor="0xDDDDDD" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arr}"
enabled="{checkBox.selected}"
width="200"
backgroundDisabledColor="{colorPicker.selectedColor}" />
</mx:Application>
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/07/17/changing-the-background-color-of-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
List {
backgroundDisabledColor: red;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
<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:List id="list"
dataProvider="{arr}"
enabled="{checkBox.selected}"
width="200" />
</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/07/17/changing-the-background-color-of-a-disabled-list-control-in-flex/ -->
<mx:Application 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 {
list.setStyle("backgroundDisabledColor", evt.color);
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="enabled:">
<mx:CheckBox id="checkBox"
selected="true" />
</mx:FormItem>
<mx:FormItem label="backgroundDisabledColor:">
<mx:ColorPicker id="colorPicker"
selectedColor="0xDDDDDD"
change="colorPicker_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arr}"
enabled="{checkBox.selected}"
width="200" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/17/changing-the-background-color-of-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.CheckBox;
import mx.controls.ColorPicker;
import mx.controls.List;
import mx.events.ColorPickerEvent;
private var arr:Array;
private var checkBox:CheckBox;
private var colorPicker:ColorPicker;
private var list:List;
private function init():void {
arr = [];
arr.push({label:"One"});
arr.push({label:"Two"});
arr.push({label:"Three"});
arr.push({label:"Four"});
arr.push({label:"Five"});
arr.push({label:"Six"});
arr.push({label:"Seven"});
arr.push({label:"Eight"});
arr.push({label:"Nine"});
arr.push({label:"Ten"});
checkBox = new CheckBox();
checkBox.selected = true;
checkBox.addEventListener(Event.CHANGE, checkBox_change);
colorPicker = new ColorPicker();
colorPicker.selectedColor = 0xDDDDDD;
colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);
var formItem1:FormItem = new FormItem();
formItem1.label = "enabled:";
formItem1.addChild(checkBox);
var formItem2:FormItem = new FormItem();
formItem2.label = "backgroundDisabledColor:";
formItem2.addChild(colorPicker);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem1);
form.addChild(formItem2);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
list = new List();
list.dataProvider = arr;
list.width = 200;
addChild(list);
}
private function checkBox_change(evt:Event):void {
list.enabled = checkBox.selected;
}
private function colorPicker_change(evt:ColorPickerEvent):void {
list.setStyle("backgroundDisabledColor", evt.color);
}
]]>
</mx:Script>
</mx:Application>
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.
Share
