flex tree icon

最新推荐文章于 2014-06-06 14:16:24 发布

原创最新推荐文章于 2014-06-06 14:16:24 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

Adobe 专栏收录该内容

69 篇文章

订阅专栏

本文介绍如何在Flex框架中使用Tree控件并自定义图标。包括改变默认图标、通过数据提供者指定图标、使用setItemIcon方法及iconFunction属性自定义图标显示逻辑。

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方式