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

2023-05-25 21:05:55 节点 个性化 图标

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



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>

相关文章