Flex Examples
The following example shows how you can set the label color for a selected item in a Flex List control by setting the textSelectedColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-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="textSelectedColor:">
<mx:ColorPicker id="colorPicker" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arr}"
textSelectedColor="{colorPicker.selectedColor}"
width="100" />
</mx:Application>
View source is enabled in the following example.
You can also set the textSelectedColor 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/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
List {
textSelectedColor: 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:List id="list"
dataProvider="{arr}"
width="100" />
</mx:Application>
Or, you can set the textSelectedColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-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("textSelectedColor", 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="textSelectedColor:">
<mx:ColorPicker id="colorPicker"
change="colorPicker_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arr}"
width="100" />
</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
I have listed few objects in a list which are rendered using item rendering. All these objects of differnet classes but implementing same interface. But myList.selectedItem gives an ObjectProxy and type casting is failing on it. Any solution?
Basically question is that, how can get an object from a list which is rendered using an item render?