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

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

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

Xml代码 flex tree 的两个小技巧_flex tree 技巧 节点 flex tree 的两个小技巧_flex tree 技巧 节点_02
  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解决了第二个问题