Flex中如何利用openItems属性检测当前Tree的哪一个节点被展开的例子

By Minidxer | December 27, 2008

接下来的例子演示了Flex中如何利用openItems属性，检测当前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="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.TreeEvent;
  10.             import mx.utils.ObjectUtil;
  11.  
  12.             private function tree_openItems_change(evt:TreeEvent):void {
  13.                 /* Set the array and let binding do the real work. */
  14.                 openItemArr = tree.openItems as Array;
  15.             }
  16.         ]]>
  17.     </mx:Script>
  18.  
  19.     <mx:Array id="openItemArr" />
  20.  
  21.     <mx:XML id="xmlDP">
  22.         <node>
  23.             <node label="1.a" />
  24.             <node label="1.b" />
  25.             <node label="1.c">
  26.                 <node label="1.c.i" />
  27.                 <node label="1.c.ii" />
  28.                 <node label="1.c.iii" />
  29.                 <node label="1.c.iv" />
  30.                 <node label="1.c.v" />
  31.             </node>
  32.             <node label="1.d" />
  33.             <node label="1.e">
  34.                 <node label="1.e.i" />
  35.                 <node label="1.e.ii" />
  36.                 <node label="1.e.iii">
  37.                     <node label="1.e.iii.A" />
  38.                 </node>
  39.                 <node label="1.e.iv" />
  40.             </node>
  41.             <node label="1.f" />
  42.         </node>
  43.     </mx:XML>
  44.  
  45.     <mx:ApplicationControlBar dock="true">
  46.         <mx:Label text="Tree openItems length: {openItemArr.length}" />
  47.     </mx:ApplicationControlBar>
  48.  
  49.     <mx:HDividedBox width="100%">
  50.         <mx:Tree id="tree"
  51.                 dataProvider="{xmlDP}"
  52.                 labelField="@label"
  53.                 showRoot="false"
  54.                 width="50%"
  55.                 rowCount="8"
  56.                 itemOpen="tree_openItems_change(event);"
  57.                 itemClose="tree_openItems_change(event);" />
  58.  
  59.         <mx:List id="list"
  60.                 dataProvider="{openItemArr}"
  61.                 labelField="@label"
  62.                 width="50%"
  63.                 height="100%" />
  64.  
  65.         <mx:TextArea id="textArea"
  66.                 editable="false"
  67.                 text="{ObjectUtil.toString(openItemArr)}"
  68.                 width="50%"
  69.                 height="100%" />
  70.     </mx:HDividedBox>
  71.  
  72. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Tree | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll