ToggleButtonBar--创建一组状态按钮

  用ToggleButtonBar定义一套用来维护按钮选择状态的纵向或横向的按钮组.代码如下：

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
initialize="initApp(event)">
<mx:ToggleButtonBar id="toggle"
dataProvider="{dataProvider}"
itemClick="setMode(event)"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
[Bindable]
private var dataProvider:ArrayCollection;
private function initApp(evt:FlexEvent):void {
var temp:Array = new Array({label:"Show Labels",
mode:"labels"},
{label:"Show Titles",
mode:"titles"});
dataProvider = new ArrayCollection(temp);
}
private function setMode(evt:ItemClickEvent):void {
switch (evt.item.mode) {
case "labels":
trace("George, Tim, Dean");
break;
case "titles":
trace("Vice President, President, Director");
break;
default:
break;
}
}
]]>
</mx:Script>
</mx:Application>

改进：

默认情况ArrayCollection中label属性会被ToggleButtonBar按钮的标签使用。如果想使用其他属性，可以用ToggleButtonBar的labelField属性，代码如下：

<mx:ToggleButtonBar id="toggle"dataProvider="{dataProvider}" labelField="mode"itemClick="setMode(event)"/>

 

详情参见 flex3 Cookbook