Flex Examples
The following example shows how you can change the item background roll over color for a Flex ComboBox control by setting the rollOverColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/11/setting-the-item-background-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
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="rollOverColor:">
<mx:ColorPicker id="colorPicker"
selectedColor="#CCCCCC" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
rollOverColor="{colorPicker.selectedColor}" />
</mx:Application>
You can also set the rollOverColor style using 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/11/setting-the-item-background-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
ComboBox {
rollOverColor: #CCCCCC;
}
</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:ComboBox id="comboBox"
dataProvider="{arr}" />
</mx:Application>
Or, you can set the rollOverColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/11/setting-the-item-background-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
private function colorPicker_change(evt:ColorPickerEvent):void {
comboBox.setStyle("rollOverColor", 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="rollOverColor:">
<mx:ColorPicker id="colorPicker"
change="colorPicker_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ComboBox id="comboBox"
dataProvider="{arr}" />
</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/11/setting-the-item-background-roll-over-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.ColorPicker;
import mx.controls.ComboBox;
import mx.events.ColorPickerEvent;
private var arr:Array;
private var colorPicker:ColorPicker;
private var comboBox:ComboBox;
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"});
colorPicker = new ColorPicker();
colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);
var formItem:FormItem = new FormItem();
formItem.label = "rollOverColor:";
formItem.addChild(colorPicker);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
Application.application.addChildAt(appControlBar, 0);
comboBox = new ComboBox();
comboBox.dataProvider = arr;
addChild(comboBox);
}
private function colorPicker_change(evt:ColorPickerEvent):void {
comboBox.setStyle("rollOverColor", 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
