Flex4 可折叠的面板控件Accordion

设置非常简单，和TabNavigator基本一样

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="init()"
			   xmlns:views="views.*">
	
	<fx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			import mx.events.IndexChangedEvent;
			
			protected function init():void
			{
				accordion.addEventListener(IndexChangedEvent.CHANGE,Tab_ItemChanged_Call);
			}
			
			protected function Tab_ItemChanged_Call(event:IndexChangedEvent):void
			{
				Alert.show(event.newIndex+"\n"+event.oldIndex+"\n"+accordion.selectedChild.label);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel id="mix" verticalCenter="0" horizontalCenter="0" title="Mix" width="450" height="300">
		<mx:Accordion id="accordion" verticalCenter="0" horizontalCenter="0" >
			<views:TVView label="TV"/>
			<views:ComputerView label="Computer"/>
		</mx:Accordion>
	</s:Panel>
</s:Application>

 
填充的View内容和TabNavigator一样，未进行修改。

 

但是，实际运用中，我们相对于控件自身，更关注起内嵌控件的事件处理，TabNavigator和Accordion相同，内部可填充几乎所有的显示控件。