Flex Tree应用总结(一)—数据源配置+选择事件

Flex 中的Tree是常用的组件，这里对其一些用法进行总结。

1数据源

Tree的数据源为XML格式的数据。下面提供两种设置方式：

1.1在MXML文件中标签设置

写在非可视化组件中

<fx:XML id="treeData">
<node label="sideBar">
<node label="节点1" >
<node label="节点2" />
<node label="节点3" />
<node label="节点4" />
<node label="节点5" />
</node>
<node label="二级节点"/>
<node label="XXX" />
</node>
</fx:XML>

1.2脚本中定义

public static var DEFAULTDATA:XML =
<node label="任务栏" queryIndex="1">
<node label="<span style="font-family: Arial, Helvetica, sans-serif;">XXX</span>" queryIndex="2">
<node label="22" queryIndex="3"/>
<node label="33"  queryIndex="4"/>
<node label="44"  queryIndex="5"/>
<node label="55" queryIndex="6"/>
</node>
<node label="66" queryIndex="7" />
<customedNode label="77" queryIndex="0"/>
</node>

主要注意XML类型变量的书写。然后在代码中加上  

tree.dataProvider=DEFAUTDATA;

1.3设置显示字段

<mx:Tree xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" labelField="@label" showRoot="true" >

labelField设置显示的字段，showRoot是设置是否显示根节点。

2Tree的元素选择事件

2.1元素选择事件

Tree中的change事件是mx.events.ListEvent下的事件，在代码中注册监听时可以查看ListEvent.as中的事件类型。ListEvent.ITEM_CLICK是某个节点元素被选中时抛出的事件，注意该事件是不可bubbles的（说是不可冒泡，这样在addEventListener是有个参数需要设置为true才可以被父容器等监听到，如我开始用Application.addEventlistener来监听ListEvent.Item_CLICK事件，监听不到）。在Application中设置tree相关的事件监听举例如下：

addEventListener(ListEvent.ITEM_CLICK,new TreeSelectedListener().treeSelected,true);

2.2元素选择后处理

监听到该事件后，在事件处理中，用event.target可以拿到tree对象，而若是要拿到点击选择的节点的一些内容，则需要进行如下操作

if(event.target is SideBarTree){//判断是否是tree，也可以根据id判断事件源
var sideBartree:SideBarTree = SideBarTree(event.target);//得到tree对象
var selectNode:XML = sideBartree.selectedItem as XML;//转成xml格式
Alert.show(selectNode.@queryIndex);//可以取得xml中对应的属性
}

最终可以得到在1.2中的queryIndex属性值，进行下一步的判断。