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>