Flex中如何利用itemDoubleClick事件在双击Tree节点时展开该节点项目的例子

By Minidxer | December 25, 2008

接下来的例子演示了Flex中如何利用itemDoubleClick事件,在双击Tree节点时展开该节点项目。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="horizontal"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ListEvent;
  11.  
  12.             private function tree_itemDoubleClick(evt:ListEvent):void {
  13.                 var node:XML = tree.selectedItem as XML;
  14.                 var isOpen:Boolean = tree.isItemOpen(node);
  15.                 tree.expandItem(node, !isOpen);
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.  
  20.     <mx:XMLListCollection id="xmlListColl">
  21.         <mx:source>
  22.             <mx:XMLList>
  23.                 <node label="One">
  24.                     <node label="One.1">
  25.                         <node label="One.1.1">
  26.                             <node label="One.1.1.1">
  27.                                 <node label="One.1.1.1.1" />
  28.                             </node>
  29.                         </node>
  30.                     </node>
  31.                     <node label="One.2" />
  32.                     <node label="One.3" />
  33.                 </node>
  34.                 <node label="Two">
  35.                     <node label="Two.1" />
  36.                     <node label="Two.2" />
  37.                     <node label="Two.3" />
  38.                 </node>
  39.                 <node label="Three" />
  40.             </mx:XMLList>
  41.         </mx:source>
  42.     </mx:XMLListCollection>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:CheckBox id="checkBox"
  46.                 label="doubleClickEnabled:"
  47.                 labelPlacement="left"
  48.                 selected="true" />
  49.     </mx:ApplicationControlBar>
  50.  
  51.     <mx:Tree id="tree"
  52.             dataProvider="{xmlListColl}"
  53.             labelField="@label"
  54.             width="250"
  55.             rowCount="6"
  56.             doubleClickEnabled="{checkBox.selected}"
  57.             itemDoubleClick="tree_itemDoubleClick(event);"
  58.             showScrollTips="true" />
  59.  
  60. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Tree | No Comments » | Tags: , , , , ,

Search Posts