Flex 给Tree的每个节点添加自定义图标

最新推荐文章于 2024-05-17 17:08:16 发布

-氺_涙-

最新推荐文章于 2024-05-17 17:08:16 发布

阅读量863

点赞数

分类专栏： Flex 文章标签： flex Tree icon

本文链接：https://blog.csdn.net/luohuayuan69/article/details/28878915

版权

Flex 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

此功能使用上一博文中第二种方式加载图片, 此处不再赘述.

<?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" minWidth="955" minHeight="600">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			[Bindable]
			private var mainData:XML = 
				<root>
					<menuitem label="MenuItem A" icon="deskIcon01">
						<menuitem label="SubMenuItem A-1" icon="icon"/>
						<menuitem label="SubMenuItem A-2" icon="icon"/>
					</menuitem>
					<menuitem label="MenuItem B" icon="deskIcon02"/>
					<menuitem label="MenuItem C" icon="deskIcon03"/>
					<menuitem label="MenuItem D" icon="deskIcon04">
						<menuitem label="SubMenuItem D-1" icon="icon"/>
						<menuitem label="SubMenuItem D-2" icon="icon"/>
						<menuitem label="SubMenuItem D-3" icon="icon"/>
					</menuitem>
					<menuitem label="MenuItem E" icon="deskIcon05"/>
					<menuitem label="MenuItem F" icon="deskIcon06"/>
					<menuitem label="MenuItem G" icon="deskIcon07"/>
					<menuitem label="MenuItem H" icon="deskIcon08"/>
				</root>;
			
			protected function iconFun(item:Object):Class
			{
				return resourceManager.getClass("desktopicons", item.@icon.toString());
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Tree id="mainMenu" x="82" y="44" width="200" height="300" dataProvider="{mainData}"
			 iconFunction="iconFun"
			 itemRenderer="MainMenuItemRenderer" labelField="@label"
			 showRoot="false" verticalScrollPolicy="auto"/>
</s:Application>

注：Tree默认不限制icon大小，当图片很大时，会导致Tree显示不正常，建议创建ItemRenderer，给图片添加上宽高限制。