Flex学习总结之一—— Tree 设置子节点小图标

 

 前一阵子学习Flex，大部分时间和Tree控件打上了交道，现在想回头把之前用的的东西整理一下，其中有可能是在网上Down的代码，如有原作者看到还请见谅：

1、使用XMLList设置icon属性

   <mx:Script>
      <![CDATA[
      // 引入两个外部图片，并且绑定到一个Class对象上
         [Bindable]
         [Embed(source="assets/radioIcon.jpg")]
         public var iconSymbol1:Class;
         [Bindable]
         [Embed(source="assets/topIcon.jpg")]
         public var iconSymbol2:Class;
      ]]>
   </mx:Script>
   <!-- 使用XML定义好的icon -->
   <mx:Tree iconField="@icon" labelField="@label" showRoot="false"
      width="160">
      <mx:XMLList>
         <node label="New">
           <!-- 在XML里添加icon属 -->
            <node label="HTML Document" icon="iconSymbol2"/>
            <node label="Text Document" icon="iconSymbol2"/>
         </node>
         <node label="Close" icon="iconSymbol1"/>
      </mx:XMLList>
   </mx:Tree>

2、通过Tree.setItemIcon()函数设置图标

<mx:Script>
      <![CDATA[
      // 引入两个外部图片，并且绑定到一个Class对象上
         [Bindable]
         [Embed(source="assets/radioIcon.jpg")]
         public var iconSymbol1:Class;
         [Bindable]
         [Embed(source="assets/topIcon.jpg")]
         public var iconSymbol2:Class;
         //创建一个设置icon的方法
         private function setIcons():void {
         
          /**
           * setItemIcon () 方法
           *
           * public function setItemIcon(item:Object, iconID:Class, iconID2:Class):void
           *
           * 设置项目的关联图标。
           * 调用此方法将覆盖此项目的 iconField 和 iconFunction 属性（如果此项目为叶项目）。
           * 分支项目不使用 iconField 和 iconFunction 属性。
           * 它们使用 folderOpenIcon 和 folderClosedIcon 属性。
           *
           * item:Object — 要影响的项目. (需要改变)
           * iconID:Class — 关闭（或叶）图标的链接 ID.
           * iconID2:Class — 打开图标的链接 ID.
           *
           **/
            myTree.setItemIcon(myTree.dataProvider.getItemAt(0),
               iconSymbol1, iconSymbol2);
              
            myTree.setItemIcon(myTree.dataProvider.getItemAt(1),
               iconSymbol2, null);
         }
      ]]>
   </mx:Script>

   <mx:Tree id="myTree" labelField="@label" showRoot="false"
      width="160" initialize="setIcons();">
      <mx:XMLList>
       <!-- 在这里可以省去上面提到的icon属性，XML数据可以直接从服务器获得，不需要硬编码在XML里 -->
         <node label="New">
            <node label="HTML Document"/>
            <node label="Text Document"/>
         </node>
         <node label="Close"/>
      </mx:XMLList>
   </mx:Tree>