Flex tree组件数据源、图标等修改

最新推荐文章于 2025-10-06 15:29:08 发布

转载最新推荐文章于 2025-10-06 15:29:08 发布 · 533 阅读

flex 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个使用Flex实现的Tree控件示例，详细展示了如何通过XMLList数据源进行数据绑定，并通过自定义样式来增强Tree控件的视觉效果。此外，还介绍了如何处理Tree控件的change事件。

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