Flex的树形控件(Tree Control)中如何通过点击行进行展开/缩进的例子

By Minidxer | April 6, 2008

接下来的例子演示了如何通过点击行来替代点击箭头图标展开/缩进树形控件(Tree Control)中的项目。

让我们先来看一下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.collections.ICollectionView;
  10.             import mx.events.ListEvent;
  11.  
  12.             private function tree_itemClick(evt:ListEvent):void {
  13.                 var item:Object = Tree(evt.currentTarget).selectedItem;
  14.                 if (tree.dataDescriptor.isBranch(item)) {
  15.                     tree.expandItem(item, !tree.isItemOpen(item), true);
  16.                 }
  17.             }
  18.  
  19.             private function tree_labelFunc(item:XML):String {
  20.                 var children:ICollectionView;
  21.                 var suffix:String = "";
  22.                 if (tree.dataDescriptor.isBranch(item)) {
  23.                     children = tree.dataDescriptor.getChildren(item);
  24.                     suffix = " (" + children.length + ")";
  25.                 }
  26.                 return item[tree.labelField] + suffix;
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:XML id="dp">
  32.         <root>
  33.             <folder label="One">
  34.                 <folder label="One.A">
  35.                     <item label="One.A.1" />
  36.                     <item label="One.A.2" />
  37.                     <item label="One.A.3" />
  38.                     <item label="One.A.4" />
  39.                     <item label="One.A.5" />
  40.                 </folder>
  41.                 <item label="One.1" />
  42.                 <item label="One.2" />
  43.             </folder>
  44.             <folder label="Two">
  45.                 <item label="Two.1" />
  46.                 <folder label="Two.A">
  47.                     <item label="Two.A.1" />
  48.                     <item label="Two.A.2" />
  49.                 </folder>
  50.             </folder>
  51.         </root>
  52.     </mx:XML>
  53.  
  54.     <mx:Tree id="tree"
  55.             dataProvider="{dp}"
  56.             showRoot="false"
  57.             labelField="@label"
  58.             labelFunction="tree_labelFunc"
  59.             width="300"
  60.             rowCount="6"
  61.             itemClick="tree_itemClick(event);" />
  62.  
  63. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads