Flex中tree实现的种种细节

需要解决的问题：

1、自定义节点icon图标

2、右键菜单

3、右键时行选中（比较图1和图2）

4、父节点右键取消菜单（比较图3和图4）

 

<?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" 
			   creationComplete="init()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			private var iconArr:Array = new Array();
			private var menuItem:ContextMenuItem;
			
			[Embed(source="../assets/images/home_nav.gif")]
			[Bindable]
			private var icon_oa:Class;
			
			[Embed(source="../assets/images/text.gif")]
			[Bindable]
			private var icon_1:Class;
			
			[Embed(source="../assets/images/heap_view.gif")]
			[Bindable]
			private var icon_3:Class;
			
			[Embed(source="../assets/images/find.gif")]
			[Bindable]
			private var icon_2:Class;
			
			[Embed(source="../assets/images/readwrite_obj.gif")]
			[Bindable]
			private var icon_4:Class;
			
			[Embed(source="../assets/images/speak.gif")]
			[Bindable]
			private var icon_5:Class;
			
			
			[Bindable]
			private var xml:XML=
				<node icon="oa" label="办公自动化">                           
					<node label="公文管理">           
		        		<node id="1" icon="icon1" label="公文收发" />         
		        		<node id="2" icon="icon1" label="公文归档"/>        
		        		<node id="3" icon="icon1" label="公文查询"/>           
		        		<node id="4" icon="icon1" label="通知公告"/>           
	        		</node>                                                   
	        		<node label="人事管理">                                   
		        		<node label="历史数据查询">                             
		        			<node id="5" icon="icon2" label="离职人员查询"/>  
		        		</node>                                                 
		        		<node label="新员工入职">                             
		        			<node id="6" icon="icon3" label="基本信息"/> 
		        			<node id="7" icon="icon3" label="员工转正"/> 
		        		</node>                                                 
		        		<node label="工资管理">                                 
		        			<node id="8" icon="icon4" label="设置公式"/>       
		        			<node id="9" icon="icon4" label="工资发放"/>       
		        		</node>				                                          
	        		</node>                                                   
		        	<node label="决策支持">                                       
		        		<node id="11" icon="icon5" label="规则设置"/>              
		        	</node>                                                   
	        	</node>
				
			private function init():void{
				iconArr["oa"]=icon_oa;
				iconArr["icon1"]=icon_1;
				iconArr["icon2"]=icon_2;
				iconArr["icon3"]=icon_3;
				iconArr["icon4"]=icon_4;
				iconArr["icon5"]=icon_5;
				this.expendAllTreeNode();
				this.addTreeMenu();
				tree.contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,rightClickHandler);
			}
				
			/*
			 * 展开树
			 */
			public function expendAllTreeNode(): void {
				tree.validateNow();
				tree.selectedIndex = 0;
				tree.expandChildrenOf(tree.selectedItem,true);
			}
			
			/*
			* 添加右键菜单
			*/
			public function addTreeMenu():void{
				var menu:ContextMenu=new ContextMenu();
				menu.hideBuiltInItems();
				menuItem=new ContextMenuItem("打开");
				menuItem.visible=false;
				menu.customItems.push(menuItem);
				tree.contextMenu=menu;
			}
			
			/*
			* 设置节点图标
			*/
			private function setIcon(item:Object):Class{
				var node:XML = item as XML;
				var nodeIcon:String = node.@icon;
				if(node!=null && nodeIcon!=null && nodeIcon.length!=0)
					return iconArr[nodeIcon];
				else 
					return null;
			}
			
			/*
			* 处理右键事件
			*/ 
			private function rightClickHandler(ev:ContextMenuEvent):void{
				menuItem.visible=false;
				var tag:Object=ev.mouseTarget;
				//右键时行选中，此处需捕获异常
				try{
					if(tag && tag.parent && tag.parent.data && (tag.parent.data is XML))
						tree.selectedItem = tag.parent.data;
				}catch(ex:Error){
				}
				
				var node:XML = tree.selectedItem as XML;
				if(node!=null && node.@id!=null){
					var nodeId:String = node.@id;
					if(nodeId.length>0)
						menuItem.visible = true;
				}
			}
		]]>
	</fx:Script>
	<s:HGroup width="30%" height="100%">
		<mx:Tree id="tree" width="100%" height="100%" dataProvider="{xml}" 
				 labelField="@label" iconFunction="setIcon" />
	</s:HGroup>
</s:Application>

 

 

图1：处理前效果

 

图2：处理后效果

------------------------------------------------------------------------------------------------------------

 

图3：处理前效果

 

 

图4：处理后效果

 

 

注意：运行环境 Flash Builder 4

评论

3 楼 stuhack0303 2010-09-17  

。。。。。右键了，没反应。

2 楼 qiyueguxing 2010-05-12  

elvishehai 写道

怎么用不了， 开头不是mx:Application吗？

我是在flex sdk 4下运行的。Flex3的开头是mx:Application，Flex4已经换掉了，建议你更新下sdk

1 楼 elvishehai 2010-05-11  

怎么用不了， 开头不是mx:Application吗？