Flex Tree 组件使用的两个小技巧

学习了一段时间的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.iteye.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>  
其中34,35,36行解决了第一个问题 
37解决了第二个问题


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

你可能感兴趣的:(Flex Tree 组件使用的两个小技巧)