（转）FLEX树组件使用技巧

学习了一段时间的Flex,感觉Flex再成熟一些的话,Flex就很有可能成为视图层的最主流技术了.期待着Flex4,Flex5的改进吧.
这篇短文说一下使用Flex中树组件过程中两个使用小技巧吧.
可能刚刚学习的朋友会发现树组件的以下两个小问题:

点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.

点击同一个节点第二次的时候change事件是不触发的.

下边的小例子解决这两个小问题:

Xml代码



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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

<mx:XMLList id="treeData">

<node id="10000" label="评估计划">

<node id="10100" label="计划生成器">

<node id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>

<node id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>

</node>

<node id="10200" label="计划管理">

<node id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>

<node id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>

<node id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>

</node>

<node id="10300" label="我的博客">

<node id="10301" label="北边村人" canvas="javaest.javaeye.com"/>

</node>

</node>

</mx:XMLList>

<mx:Script>

<![CDATA[

import mx.controls.Image;

import mx.controls.Button;

import mx.containers.Canvas;

import mx.controls.Alert;

private function addNewTabPage(event:Event):void {

var selectedNode:XML=Tree(event.target).selectedItem as XML;

var id:String=selectedNode.@id;

var label:String=selectedNode.@label;

var canvasClassName:String=selectedNode.@canvas;

Alert.show(label);

if (functionTree.dataDescriptor.isBranch(selectedNode)) {

functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode));

}

Tree(event.target).selectedItem=null;

}

]]>

</mx:Script>

<mx:Panel width="100%" height="100%" dropShadowEnabled="false" title="新闻管理">

<mx:Tree id="functionTree" change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true" dataProvider="{treeData}" labelField="@label" borderStyle="none">

</mx:Tree>

</mx:Panel>

</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

<mx:XMLList id="treeData">
<node id="10000" label="评估计划">
<node  id="10100" label="计划生成器">
<node  id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>
<node  id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>
</node>
<node  id="10200" label="计划管理">
<node  id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>
<node  id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>
<node  id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>
</node>
<node id="10300" label="我的博客">
<node id="10301" label="北边村人" canvas="javaest.javaeye.com"/>

</node>
</node>
</mx:XMLList>

<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Button;
import mx.containers.Canvas;
import mx.controls.Alert;
private function addNewTabPage(event:Event):void {
var selectedNode:XML=Tree(event.target).selectedItem as XML;
var id:String=selectedNode.@id;
var label:String=selectedNode.@label;
var canvasClassName:String=selectedNode.@canvas;
Alert.show(label);
if (functionTree.dataDescriptor.isBranch(selectedNode)) {
functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode));
}
Tree(event.target).selectedItem=null;
}

]]>
</mx:Script>
<mx:Panel width="100%" height="100%"  dropShadowEnabled="false" title="新闻管理">
<mx:Tree  id="functionTree"   change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true"  dataProvider="{treeData}"  labelField="@label" borderStyle="none">
</mx:Tree>
</mx:Panel>
</mx:Application>

其中34,35,36行解决了第一个问题
37解决了第二个问题

转自:http://javaest.javaeye.com/blog/219555