Flex Tree自定义Icon 有几种方法,相信网上说的也比较多了,但是还是总结下来,查询起来比较方便。
1.设置Tree的一些默认属性。文件夹和文件都是通过 folderOpenIcon, folderClosedIcon, and defaultLeafIcon ,disclosureClosedIcon,disclosureOpenIcon 来执行的。
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label" folderOpenIcon="@Embed(source='open.jpg')"folderClosedIcon="@Embed(source='closed.jpg')"defaultLeafIcon="@Embed(source='def.jpg')" showRoot="false" dataProvider="{treeData}"/>
2.在数据源中设置icon。
[Embed(source='view/icon_xls.png')] [Bindable]public var icon1:Class; <fx:Declarations> <fx:XMLList id="treeData"> <node label="Mail Box" > <node label="Inbox" > <node label="Marketing" icon="icon1"/> <node label="Product Management" icon="icon1"/> <node label="Personal" icon="icon1"/> </node> <node label="Outbox" > <node label="Professional" icon="icon1"/> <node label="Personal" icon="icon1"/> </node> <node label="Spam" /> <node label="Sent" /> </node> </fx:XMLList> </fx:Declarations> <mx:Tree id="myTree" width="50%" height="100%" labelField="@label" iconField="@icon" showRoot="false" dataProvider="{treeData}"/>
3.通过设置函数 setItemItcon
protected function button_clickHandler(event:MouseEvent):void { for each(var item:XML in treeData) { iteratorItemList(item); } } private function iteratorItemList(xmllist:XML):void { for each(var item:XML in xmllist.children()) { if(item.children() && item.children().length() > 0) { iteratorItemList(item); } else { myTree.setItemIcon(item,icon1,icon2); } } }
4.用iconFunction
private function tree_iconFunc(item:Object):Class { var iconClass:Class; switch ((item as XML).@label.toString()) { case "Marketing": iconClass = icon1; break; case "Personal": iconClass = icon2; break; case "Professional": iconClass = icon3; break; } return iconClass; }