1.tree 改变每一项的 icon图标
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:myflexhero="http://www.myflexhero.com/share/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/909" minWidth="955" minHeight="600" viewSourceURL="srcview/index.html"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ [Bindable] [Embed(source="assets/myflexhero.png")] public var myflexhero:Class; [Bindable] [Embed(source="assets/yellow.png")] public var yellow:Class; ]]> </fx:Script> <mx:Tree iconField="@icon" labelField="@label" showRoot="false" width="160"> <fx:XMLList> <node label="My"> <node label="Flex Document" icon="myflexhero"/> <node label="Hero Document" icon="yellow"/> </node> <node label="com" icon="myflexhero"/> </fx:XMLList> </mx:Tree> </s:Application>
2.改变所有图片样式
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:myflexhero="http://www.myflexhero.com/share/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/909" minWidth="955" minHeight="600" viewSourceURL="srcview/index.html"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ ]]> </fx:Script> <mx:Tree folderOpenIcon="@Embed(source='1.png')" showRoot="false" labelField="@label" width="600" folderClosedIcon="@Embed(source='2.png')" defaultLeafIcon="@Embed(source='3.png')"> <fx:XMLList> <node label="My" icon="yellow1"> <node label="Flex Document" icon="myflexhero"/> <node label="Hero Document" icon="yellow"/> </node> <node label="com" icon="myflexhero"/> </fx:XMLList> </mx:Tree> </s:Application>
1、默认的Tree的属性是文件夹和文件都是通过 folderOpenIcon, folderClosedIcon, and defaultLeafIcon 来执行的,如果在程序中需要取得默认的参数可以通过这几个参数进行处理
var myMenu:SysMenu = SysMenu(item); if(myMenu.children.length==0){ return leftMenuTree.getStyle("defaultLeafIcon"); } if ( leftMenuTree.isItemOpen(item) ) { return leftMenuTree.getStyle("folderOpenIcon"); } else { return leftMenuTree.getStyle("folderClosedIcon"); }
当然也可以直接通过flex的标签来制定
<mx:Tree folderOpenIcon="@Embed(source='open.jpg')"folderClosedIcon="@Embed(source='closed.jpg')"defaultLeafIcon="@Embed(source='def.jpg')">
2、通过data provider来提供数据源的时候就指定icon
<mx:XMLList> <node label="New"> <node label="HTML Document" icon="iconSymbol2"/> <node label="Text Document" icon="iconSymbol2"/> </node> <node label="Close" icon="iconSymbol1"/> </mx:XMLList>
3、通过函数setItemItcon
[Bindable] [Embed(source="assets/radioIcon.jpg")] public var iconSymbol1:Class; [Bindable] [Embed(source="assets/topIcon.jpg")] public var iconSymbol2:Class; private function setIcons():void { myTree.setItemIcon(myTree.dataProvider.getItemAt(0), iconSymbol1, iconSymbol2); myTree.setItemIcon(myTree.dataProvider.getItemAt(1), iconSymbol2, null); }
4、Tree支持显示icon的属性iconFunction ,自定义处理函数就可以了,示例如下
<!-- -->
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:myflexhero="http://www.myflexhero.com/share/flex3-mx/flex-mx-core-components/flex-mx-ui-controls/flex-mx-tree-and-datagrid-controls/909" minWidth="955" minHeight="600" viewSourceURL="srcview/index.html"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.XMLListCollection; [Embed(source="1.png")] //这是图片的相对地址 [Bindable] public var OKicon:Class; [Embed(source="2.png")] //这是图片的相对地址 [Bindable] public var NOicon:Class; //设置不同图表 private function iconFun(item:Object):* { var xml:XML = item as XML; if(xml.attribute("bool") == true) return OKicon; else if(xml.attribute("bool") == false) return NOicon; } ]]> </fx:Script> <fx:Declarations> <mx:XMLListCollection id="datatree" > <fx:XMLList> <node label="NO1" bool="false"> <node label="NO11" bool="false"> <node label="NO111" bool="false"/> </node> <node label="NO22" bool="true"/> </node> <node label="NO2" bool="true"> <node label="NO11" bool="false"> <node label="NO111" bool="false"/> </node> <node label="NO22" bool="true"> <node label="NO222" bool="false"/> </node> </node> </fx:XMLList> </mx:XMLListCollection> </fx:Declarations> <mx:Tree id="tree" y="40" width="100%" height="100%" fontFamily="Arial" fontSize="12" dataProvider="{datatree}" labelField="@label" iconFunction="iconFun" /> </s:Application>
附件为代码:2种方式1.folderOpenIcon 形式,2.inconFunction方式