Flex中如何通过Tree类的setItemIcon事件给Tree节点设置一个个性化图标的例子

By Minidxer | December 24, 2008

接下来的例子演示了Flex中如何通过Tree类的setItemIcon事件，给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.             [Embed("assets/folder_table.png")]
  11.             private var FolderTableIcon:Class;
  12.  
  13.             [Embed("assets/folder_user.png")]
  14.             private var FolderUserIcon:Class;
  15.  
  16.             [Embed("assets/folder_wrench.png")]
  17.             private var FolderWrenchIcon:Class;
  18.  
  19.             private function init():void {
  20.                 var nodeOne:XML = xmlListColl.getItemAt(0) as XML;
  21.                 tree.setItemIcon(nodeOne, FolderTableIcon, FolderTableIcon);
  22.  
  23.                 var nodeTwo:XML = xmlListColl.getItemAt(1) as XML;
  24.                 tree.setItemIcon(nodeTwo, FolderUserIcon, FolderUserIcon);
  25.  
  26.                 var nodeThree:XML = xmlListColl.getItemAt(2) as XML;
  27.                 tree.setItemIcon(nodeThree, FolderWrenchIcon, FolderWrenchIcon);
  28.             }
  29.         ]]>
  30.     </mx:Script>
  31.  
  32.     <mx:XMLListCollection id="xmlListColl">
  33.         <mx:source>
  34.             <mx:XMLList>
  35.                 <node label="One">
  36.                     <node label="One.1">
  37.                         <node label="One.1.1">
  38.                             <node label="One.1.1.1">
  39.                                 <node label="One.1.1.1.1" />
  40.                             </node>
  41.                         </node>
  42.                     </node>
  43.                     <node label="One.2" />
  44.                     <node label="One.3" />
  45.                 </node>
  46.                 <node label="Two">
  47.                     <node label="Two.1" />
  48.                     <node label="Two.2" />
  49.                     <node label="Two.3" />
  50.                 </node>
  51.                 <node label="Three" />
  52.             </mx:XMLList>
  53.         </mx:source>
  54.     </mx:XMLListCollection>
  55.  
  56.     <mx:Tree id="tree"
  57.             dataProvider="{xmlListColl}"
  58.             labelField="@label"
  59.             width="250"
  60.             rowCount="6"
  61.             showScrollTips="true" />
  62.  
  63. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Tree | No Comments » | Tags: ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll