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

发布时间：2020-12-15 03:44:04 所属栏目：百科来源：网络整理

导读：此功能使用上一博文中第二种方式加载图片,此处不再赘述. ?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=

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

<?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，给图片添加上宽高限制。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!