7 12
The following example shows how you can change the item background
roll over color for a Flex ComboBox control by setting the rollOverColor style.
<?xml version="1.0" encoding="utf-8"?>
<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"?>
<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"?> <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 ActionScriptfriendly format:<?xml version="1.0" encoding="utf-8"?> <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(); 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>
