Learn Flex 3.0

The following example shows how you can change the text alignment in a Flex List control by setting the textAlign style.

Full code after the jump.

<?xml version=”1.0″ encoding=”utf-8″?>
<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:Array>

<mx:ApplicationControlBar dock=”true”>
<mx:Form styleName=”plain”>
<mx:FormItem label=”textAlign:”>
<mx:ComboBox id=”comboBox”
dataProvider=”[left,center,right]” />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:List id=”list”
dataProvider=”{arr}”
textAlign=”{comboBox.selectedItem}”
width=”100″ />

</mx:Application>

<?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>
@font-face {
src: local(”Base 02″);
fontFamily: EmbeddedBase02;
fontWeight: bold;
}

@font-face {
src: local(”Base 02″);
fontFamily: EmbeddedBase02;
}
</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:Array>

<mx:ComboBox id=”comboBox”
dataProvider=”{arr}”
fontFamily=”EmbeddedBase02″ />

</mx:Application>

<?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 abbrev="AL" name="Alabama" />
<mx:Object abbrev="AK" name="Alaska" />
<mx:Object abbrev="AZ" name="Arizona" />
<mx:Object abbrev="AR" name="Arkansas" />
<mx:Object abbrev="CA" name="California" />
<mx:Object abbrev="CO" name="Colorado" />
<mx:Object abbrev="CT" name="Connecticut" />
</mx:Array>

<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Reset ComboBox"
click="comboBox.selectedIndex = -1;" />
</mx:ApplicationControlBar>

<mx:ComboBox id="comboBox"
dataProvider="{arr}"
labelField="name"
prompt="Please select a state..." />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?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.controls.ComboBox;
import mx.controls.Button;
import mx.containers.ApplicationControlBar;

private var arr:Array;
private var appControlBar:ApplicationControlBar;
private var button:Button;
private var comboBox:ComboBox;

private function init():void {
arr = [];
arr.push({abbrev:"AL", name:"Alabama"});
arr.push({abbrev:"AK", name:"Alaska"});
arr.push({abbrev:"AZ", name:"Arizona"});
arr.push({abbrev:"AR", name:"Arkansas"});
arr.push({abbrev:"CA", name:"California"});
arr.push({abbrev:"CO", name:"Colorado"});
arr.push({abbrev:"CT", name:"Connecticut"});

button = new Button();
button.label = "Reset ComboBox";
button.addEventListener(MouseEvent.CLICK, button_click);

appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(button);
Application.application.addChildAt(appControlBar, 0);

comboBox = new ComboBox();
comboBox.dataProvider = arr;
comboBox.labelField = "name";
comboBox.prompt = "Please select a state...";
addChild(comboBox);
}

private function button_click(evt:MouseEvent):void {
comboBox.selectedIndex = -1;
}
]]>
</mx:Script>

</mx:Application>