（转）FLEX树组件使用技巧

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

• 点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.
• 点击同一个节点第二次的时候change事件是不触发的.

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

Xml代码

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">  
3.   
4.     <mx:XMLList id="treeData">  
5.     <node id="10000" label="评估计划">  
6.         <node  id="10100" label="计划生成器">  
7.             <node  id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>  
8.             <node  id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>  
9.         </node>              
10.         <node  id="10200" label="计划管理">  
11.             <node  id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>  
12.             <node  id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>  
13.             <node  id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>  
14.         </node>        
15.         <node id="10300" label="我的博客">  
16.             <node id="10301" label="北边村人" canvas="javaest.javaeye.com"/>  
17.                
18.         </node>  
19.     </node>  
20.     </mx:XMLList>  
21.   
22.     <mx:Script>  
23.         <![CDATA[  
24.             import mx.controls.Image;  
25.             import mx.controls.Button;  
26.             import mx.containers.Canvas;  
27.             import mx.controls.Alert;  
28.             private function addNewTabPage(event:Event):void {  
29.                 var selectedNode:XML=Tree(event.target).selectedItem as XML;  
30.                 var id:String=selectedNode.@id;  
31.                 var label:String=selectedNode.@label;  
32.                 var canvasClassName:String=selectedNode.@canvas;  
33.                 Alert.show(label);   
34.                 if (functionTree.dataDescriptor.isBranch(selectedNode)) {   
35.                     functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode));   
36.                 }                 
37.                 Tree(event.target).selectedItem=null;   
38.             }     
39.  
40.      ]]>  
41.     </mx:Script>  
42.     <mx:Panel width="100%" height="100%"  dropShadowEnabled="false" title="新闻管理">  
43.         <mx:Tree  id="functionTree"   change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true"  dataProvider="{treeData}"  labelField="@label" borderStyle="none">  
44.         </mx:Tree>    
45.     </mx:Panel>  
46. </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