`

Mx Tree Control 树节点图标变更

阅读更多
1。树节点图标设置
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" 
			   minWidth="955" minHeight="600"
			   creationComplete="initApp();">  
	
	<!-- ====== Properties of parent ======================= -->  
	<s:layout>
		<s:BasicLayout/>
	</s:layout>   
	
	<!-- ====== MetaData =================================== -->  
	
	<!-- ====== Styles ===================================== -->  
	
	<!-- ====== Script ===================================== -->  
	<fx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			
			[Bindable]
			[Embed(source="images/info.gif")]
			public var infoImg:Class;

			[Bindable]
			[Embed(source="images/169.gif")]
			public var defImg:Class;

			
			[Bindable]
			private var treeData:XML =
				<root>
					<node label="Monkeys">
						<node label="South America" >
							<node label="Coastal"/>
							<node label="Inland"/>
						</node>
						<node label="Africa" isBranch="true" />
						<node label="Asia" isBranch="true"/>
					</node>
					<node label="Sharks">
						<node label="South America" isBranch="true"/>
						<node label="Africa" isBranch="true"/>
						<node label="Asia" >
							<node label="Coastal"/>
							<node label="Inland"/>
						</node>
					</node>
				</root>;
			
			private var openSequence:Array = [];
			private function initApp():void {
				/* Parse URL and place values into openSequence Array.
				This lets you pass any integers on the query string,
				in any order. So:
				http://localhost/flex/flex2/DrillIntoTree.swf?0=1&1=2&2=0
				
				http://localhost:8080/FlexWeb/FlexWeb-debug/TreeDemo4.swf?0=1&1=2&2=0
				
				results in an array of selections like this:
				0:1
				1:2
				2:0
				Non-ints are ignored.
				The Array is then used to drill down into the tree.
					*/
			var paramLength:int = 0;
			for (var s:String in FlexGlobals.topLevelApplication.parameters) {
				if (!isNaN(Number(s))) {
					openSequence[s] = FlexGlobals.topLevelApplication.parameters[s];
					paramLength += 1;
				}
			}
			openTree();
			}
			private function openTree():void {
				var nodeList:XMLListCollection =
					myTree.dataProvider as XMLListCollection;
				var node:XMLList = nodeList.source;
				for(var i:int=0; i < openSequence.length; i++) {
					var j:int = openSequence[i];
					var n:XML = node[j];
					if( n.children() != null ) {
						// 如果有子节点,打开子节点						
						myTree.expandItem(n,true,false);
						node = n.children();
					} else {
						break;
					}
				}
				if( n != null ) myTree.selectedItem = n;
			}
			
			// 甚至指定节点的图标			
			private function setIcons():void {
				myTree.setItemIcon(myTree.dataProvider.getItemAt(0),
					infoImg, defImg);
				myTree.setItemIcon(myTree.dataProvider.getItemAt(1),
					infoImg, null);
			}


			protected function myTree_initializeHandler(event:FlexEvent):void
			{
				setIcons();
				//选择指定节点
				myTree.selectedIndex = 2;
 			}

		]]>
	</fx:Script>
	
	<!-- ====== Declarations =============================== -->  
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>   
	
	<!-- ====== UI Components ============================== -->     
	<mx:Tree id="myTree"
			 y="50"
			 width="221"
			 height="257"
			 horizontalCenter="0"
			 dataProvider="{treeData.node}"
			 labelField="@label"
			 iconField="@icon"
			 folderOpenIcon="@Embed(source='images/open.gif')"
			 folderClosedIcon="@Embed(source='images/close.gif')"
  			 defaultLeafIcon="{defImg}"
			 initialize="myTree_initializeHandler(event)"
			 />

</s:Application>

0
0
分享到:
评论
1 楼 zjb_0308 2011-03-03  
厉害啊~~看了几篇大哥写的关于flex的文章,就能上手了,多谢多谢!

相关推荐

    Flex使用<mx:Tree>控件创建树(可添加和删除节点)

    本文将详细讲解如何在Flex中使用`&lt;mx:Tree&gt;`控件来创建可动态添加和删除节点的树形结构,以及相关的源码和工具应用。 `&lt;mx:Tree&gt;`控件是Flex MX组件库中的一个关键组件,它允许开发者展示层次化的数据,用户可以...

    Juniper mx visio 图标

    【标题】"Juniper MX Visio 图标"指的是在Microsoft Visio中使用的,专门用于绘制Juniper MX系列路由器的图形符号。这些图标是按照真实比例设计的,旨在帮助网络工程师和设计师精确地在Visio图表中展示Juniper MX...

    flex tree控件

    下面我们将深入探讨Flex Tree控件的基本概念、自定义节点图标以及使用线条连接节点的方法。 1. Flex Tree控件基本概念: Flex Tree控件是Adobe Flex框架中的一个组件,用于展示具有层级关系的数据。每个节点可以...

    构造flex3.5的带复选框的树(CheckBoxTree)

    3. **创建自定义树项渲染器**:为了在每个树节点上显示复选框,我们需要创建一个自定义的树项渲染器。这个渲染器将负责绘制复选框并处理用户的交互。 ```xml &lt;mx:HBox width="100%"&gt; &lt;mx:CheckBox id="checkBox...

    flex checkboxtree复选树形下拉框

    同时,树节点还可以展开和折叠,以显示或隐藏其子节点。 在`ReportListPage.mxml`中,开发者可能使用了`Tree`控件的自定义类,或者在`Tree`控件的基础上添加了复选框组件。他们可能会覆盖`createChildren()`方法来...

    flex带复选框的tree,flex checkboxtree

    在Flex CheckboxTree中,每个树节点都有一个与之关联的复选框。当用户点击复选框时,相应的树节点会被选中或取消选中。开发者可以通过监听CheckBoxTree的事件来处理这些变化,例如,当节点的选中状态改变时,更新...

    第十五节Tree树形菜单组件运用.docx

    【第十五节 Tree 树形菜单组件运用】 在互联网应用开发中,Tree 组件是一种常见的树形菜单控件,常用于展示层次结构清晰的数据。它允许用户通过展开和折叠节点来浏览多级信息,如同 HTML 网页中的树形菜单。在本节...

    Flex tree的用法

    - **节点数据**: 每个树节点可以包含一个对象,这个对象可以是自定义类的实例,该类包含了节点所需的所有属性和方法。 - **样式和外观**: 你可以自定义节点的样式,包括字体、颜色、展开/折叠图标等,以符合应用...

    flex tree+checkbox级联勾选

    2. **设置Tree数据源**:将数据模型绑定到Tree的数据Provider上,这样每个树节点就对应了一个数据对象。 3. **自定义树节点渲染器**:为了显示Checkbox,我们需要为Tree组件创建一个自定义的渲染器。这个渲染器除了...

    CheckBoxTree.zip

    在Flex开发中,CheckBoxTree是一种常用的UI组件,它结合了树形结构和复选框功能,使得用户可以方便地对树节点进行多选操作。在本文中,我们将深入探讨如何在Flex中实现CheckBoxTree,以及相关的关键技术点。 首先,...

    Flex Tree组件的实线连接线

    Tree组件是基于mx.controls.treeClasses.TreeItemRenderer类来渲染每个节点的。默认的渲染器提供了基本的样式和交互,但并不支持自定义连接线样式。因此,我们需要创建自定义的TreeItemRenderer,以便覆盖默认的线条...

    flex tree 教程二

    在Flex中,Tree组件是基于MX组件集的一部分,它允许用户通过节点展开和折叠来探索层级数据。每个节点可以包含子节点,形成树状结构。创建和操作Tree组件主要涉及以下几个方面: 1. **数据模型**:Flex Tree组件依赖...

    lodToolkit:细节级别工具包(LTK)。 将osgb lod树转换为3mx树。 将Plylaslazxyz中的Pointcloud转换为3mxosgb树

    将osgb lod树转换为Bentley ContextCapture 树。 pointcloudToLod 将ply / las / laz / xyz格式的点云转换为osgb / lod树,以便可以立即加载点云。 当ply / las / laz / xyz文件流传输到转换器时,此程序可以处理...

    基于移动节点的无线网状网MX-MAC协议[1].pdf

    为解决这一问题,研究者对现有的MAC(Medium Access Control)协议进行了改进,提出了移动MX-MAC协议。新协议引入了退避机制,即在移动节点和非移动节点通信时,每个节点在发送数据前会进行随机退避,以减少碰撞的...

    flex tree checkbox

    Tree组件是基于Adobe Flex SDK的MX组件集中的一个元素,它可以显示层次化的数据集合,每个层级称为一个节点。每个节点可以展开或折叠,显示或隐藏其子节点。通过定制,Tree可以包含图标、文本以及我们在这里讨论的复...

    Flex 改变树结点图标的2种方法介绍

    树形控件中的每一个树节点通常会有一个图标与之对应,用以区分节点类型,例如文件夹节点和叶子节点。本文将介绍两种方法来改变Flex中的树结点图标,这两种方法分别是基于树结点是否有子结点进行图标改变,以及根据树...

    flex tree 中渲染checkBox

    这个文件通常包含自定义树渲染器的代码,用于显示带有复选框的树节点。自定义渲染器是Flex中扩展组件外观和行为的一种方式。在这个文件中,你需要定义一个继承自`mx.controls.treeClasses.TreeItemRenderer`的类,并...

    Flex ComBox 下拉树功能

    5. 事件监听:监听Tree的itemClick事件,当用户点击树节点时,更新ComboBox的selectedItem,并关闭下拉菜单。 ```actionscript tree.addEventListener(TreeEvent.ITEM_CLICK, onTreeItemClick); function ...

    Flex 树形结构

    `CheckTree` 可能是一个自定义的类,扩展了Flex的内置`Tree`类,增加了复选框功能,使得用户可以对树节点进行选择操作。而`CheckTreeRenderer`可能是该自定义树节点的渲染器,负责将每个节点呈现为带有复选框的样式...

    MX25L128_MX25L256_SPI驱动代码.rar_MX25L128_MX25L128 程序_MX25L256驱动代码_

    SPI接口的MX25L128和MX25L256 Flash单片机驱动代码涉及了微控制器与外部存储器之间的通信技术,主要集中在SPI(Serial Peripheral Interface)协议的应用上。MX25L128和MX25L256是来自Microchip Technology公司的...

Global site tag (gtag.js) - Google Analytics