Flex tree組件資料來源、表徵圖等修改

更換Tree組件預設、開啟、關閉、有子項等幾個狀態下的ico表徵圖。 複製代碼 代碼如下:<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--下面是樣式-->
<mx:Style >
Tree
{
verticalScrollBarStyleName: treeVerticalScrollBar;
selectionColor: #417597;
/*為預設、開啟、關閉、有子項等幾個狀態添加不同的ico*/
defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif");
folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif");
folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif");
disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif");
}
.treeVerticalScrollBar
{
borderColor: #f00;
}
</mx:Style>
<mx:Script>
<![CDATA[
//綁定資料，定義xml類型變數用於存放選中節點
[Bindable]
public var selectedNode:XML;
//當tree發生change事件時的事件
public function treeChanged(event:Event):void {
//將選中的節點轉換成xml，賦予selectedNode，as為轉換類型
selectedNode=Tree(event.target).selectedItem as XML;
}
//tree有3個事件使用較多，change、itemClick、itemOpen、itemClose
//change:選中列改變時被觸發
//itemClick:點擊某一列時觸發
//itemOpen:節點展開時觸發
//itemClose:節點關閉時觸發
]]>
</mx:Script>
<!--XMLList作為資料來源是最適合於tree組件的-->
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<!--@表示xml中間點的屬性，如：@label表示label屬性的值-->
<!--dataProvider="{treeData}"表示綁定資料，資料來源可以是XML也可以是XMLList-->
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>