更换Tree组件默认、打开、关闭、有子项等几个状态下的ico图标。

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>

<>

<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>

<>

<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%">

<>

<>

<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>