`

Flex Tree 组件使用的两个小技巧

    博客分类:
  • Flex
阅读更多

学习了一段时间的Flex,感觉Flex再成熟一些的话,Flex就很有可能成为视图层的最主流技术了.期待着Flex4,Flex5的改进吧.
这篇短文说一下使用Flex中树组件过程中两个使用小技巧吧.
可能刚刚学习的朋友会发现树组件的以下两个小问题:

  • 点击一个非叶子节点的时候,Tree组件不自动的展开或关闭他的子节点.
  • 点击同一个节点第二次的时候change事件是不触发的.

下边的小例子解决这两个小问题:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

   	<mx:XMLList id="treeData">
    <node id="10000" label="评估计划">
	    <node  id="10100" label="计划生成器">
	        <node  id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>
	        <node  id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>
		</node>	        
	    <node  id="10200" label="计划管理">
	        <node  id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>
	        <node  id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>
	        <node  id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>
	    </node>	  
	    <node id="10300" label="我的博客">
	    	<node id="10301" label="北边村人" canvas="javaest.iteye.com"/>
	    	
	    </node>
	</node>
    </mx:XMLList>

   	<mx:Script>
        <![CDATA[
        	import mx.controls.Image;
        	import mx.controls.Button;
        	import mx.containers.Canvas;
        	import mx.controls.Alert;
            private function addNewTabPage(event:Event):void {
            	var selectedNode:XML=Tree(event.target).selectedItem as XML;
            	var id:String=selectedNode.@id;
            	var label:String=selectedNode.@label;
            	var canvasClassName:String=selectedNode.@canvas;
            	Alert.show(label); 
           	    if (functionTree.dataDescriptor.isBranch(selectedNode)) { 
                    functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode)); 
                }            	
            	Tree(event.target).selectedItem=null; 
            }   

     ]]>
    </mx:Script>
	<mx:Panel width="100%" height="100%"  dropShadowEnabled="false" title="新闻管理">
    	<mx:Tree  id="functionTree"   change="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true"  dataProvider="{treeData}"  labelField="@label" borderStyle="none">
        </mx:Tree> 
    </mx:Panel>
</mx:Application>

 其中34,35,36行解决了第一个问题
37解决了第二个问题

 

或者:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderStyle="none" cornerRadius="0">

   	<mx:XMLList id="treeData">
    <node id="10000" label="评估计划">
	    <node  id="10100" label="计划生成器">
	        <node  id="10101" label="新建计划" canvas="javaest.FirstCanvas"/>
	        <node  id="10102" label="复制计划" canvas="javaest.SecondCanvas"/>
		</node>	        
	    <node  id="10200" label="计划管理">
	        <node  id="10201" label="将计划转为准备运行" canvas="javaest.GetProductList"/>
	        <node  id="10202" label="将计划转为正在配置" canvas="javaest.SecondCanvas"/>
	        <node  id="10203" label="查询计划状态" canvas="javaest.FirstCanvas"/>
	    </node>	  
	    <node id="10300" label="我的博客">
	    	<node id="10301" label="北边村人" canvas="javaest.iteye.com"/>
	    	
	    </node>
	</node>
    </mx:XMLList>

   	<mx:Script>
        <![CDATA[
        	import mx.controls.Image;
        	import mx.controls.Button;
        	import mx.containers.Canvas;
        	import mx.controls.Alert;
            private function addNewTabPage(event:Event):void {
            	var selectedNode:XML=Tree(event.target).selectedItem as XML;
            	var id:String=selectedNode.@id;
            	var label:String=selectedNode.@label;
            	var canvasClassName:String=selectedNode.@canvas;
            	Alert.show(label); 
           	    if (functionTree.dataDescriptor.isBranch(selectedNode)) { 
                    functionTree.expandItem(selectedNode, !functionTree.isItemOpen(selectedNode)); 
                }            	
            	//Tree(event.target).selectedItem=null; 
            }   

     ]]>
    </mx:Script>
	<mx:Panel width="100%" height="100%"  dropShadowEnabled="false" title="新闻管理">
    	<mx:Tree  id="functionTree"   itemClick="addNewTabPage(event)" width="100%" height="100%" enabled="true" showRoot="true"  dataProvider="{treeData}"  labelField="@label" borderStyle="none">
        </mx:Tree> 
    </mx:Panel>
</mx:Application>
 
分享到:
评论

相关推荐

    Flex Tree组件的实线连接线

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于展示层次结构数据。在默认情况下,Tree组件的节点之间通常使用虚线进行连接,以表示它们之间的层级关系。然而,有时候我们可能需要自定义这些连接线,比如将...

    flex tree 教程二

    Flex Tree是Adobe Flex框架中的一个组件,用于展示层次结构数据,如文件系统、组织结构或任何其他具有层级关系的数据。本教程将深入讲解Flex Tree组件的使用方法和关键概念,帮助开发者更好地理解和应用这一功能强大...

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    flex Tree 复选框。

    在Flex编程环境中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。在这个特定的场景中,我们关注的是在Flex Tree中集成复选框功能,这为用户提供了一种直观的方式来选择或操作树形结构中的多个节点...

    数关系用 线连接的flex tree 组件

    "数关系用线连接的flex tree组件"是一种专为呈现层级数据结构而设计的图形化工具,它以树状结构展示信息,并通过线条连接各个节点,清晰地呈现出层次关系。这种组件常见于组织架构、文件系统、网络拓扑等领域,帮助...

    Flex tree的用法

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用,特别是在需要展现具有嵌套结构的数据时,如文件系统、组织结构或者复杂的分类信息。让我们深入...

    Flex Tree 中Checkbox

    1. **Flex Tree组件**:Flex Tree是MXML和ActionScript中的一个控件,用于显示分层的数据结构。它由一系列可展开或折叠的节点组成,每个节点可以包含子节点。用户可以通过单击节点来展开或折叠它们,查看其子节点。 ...

    flex tree+checkbox级联勾选

    在Flex中,我们可以使用mx.controls.Tree类来创建和操作Tree组件。 Checkbox的加入使得Flex Tree具备了更多交互性。在每个树节点前添加一个复选框,用户可以通过点击复选框来选择或取消选择该节点。更重要的是,...

    Flex Tree快速定位树结点

    Flex Tree 是Adobe Flex框架中的一个组件,用于展示层次结构数据,通常以树形结构呈现。在实际应用中,用户可能需要快速找到特定的树节点,这正是"Flex Tree快速定位树结点"这一功能的核心所在。它允许用户通过输入...

    flex中tree和checkbox结合使用的插件

    在Flex开发中,Tree组件和Checkbox控件的结合使用是一个常见的需求,特别是在构建具有层级结构并需要用户进行多选操作的界面时。本插件专为此目的设计,它允许用户在树形结构中通过复选框来选择或取消选择节点,从而...

    flex4Tree组件分层显示数据示例

    在这个“flex4Tree组件分层显示数据示例”中,我们将深入探讨如何在Flex4应用程序中使用Tree组件来有效地呈现层次数据。 首先,Tree组件的基础在于XML数据源。在Flex4中,我们可以使用ArrayCollection或...

    flex tree 修改icon方法

    在Flex编程环境中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。当我们需要自定义Tree中的节点图标时,可能会遇到如何根据数据源动态改变图标的问题。标题"flex tree 修改icon方法"正好指出了这一...

    flex tree icon

    首先,Flex Tree组件是Flex提供的一个强大控件,用于展示层级关系的数据。它可以用来表示文件系统、组织结构或其他任何具有层次结构的数据集。每个节点都可以包含子节点,并且可以自定义显示内容,包括文本和图标。...

    flex tree控件

    Flex Tree控件是Adobe Flex框架中的一个组件,用于展示具有层级关系的数据。每个节点可以包含子节点,并且可以通过展开或折叠来控制显示的层次。Tree控件通常用于导航菜单、文件系统浏览等场景。 2. 数据源与数据...

    Flex Tree 的右键菜单事件

    在Flex编程中,Tree组件是一种常用的用户界面元素,用于展示层次结构的数据。它允许用户通过展开和折叠节点来浏览和操作数据。右键菜单则为用户提供了一种方便的交互方式,用户可以通过点击鼠标右键触发自定义的上...

    Flex Tree增加虚线连接

    在IT行业中,Flex Tree是一种常见的数据可视化组件,用于展示层级结构的数据,比如组织架构、文件系统或树形菜单。在Flex Tree中,连接线通常用来表示节点间的父子关系,而"Flex Tree增加虚线连接"则涉及到如何为...

    flex Tree checkbox 修改过后的

    Flex Tree控件是一种用于展示层次结构数据的UI组件,它允许用户通过节点展开和折叠来探索数据。在Flex中,为了增加更多的交互性,我们有时需要在Tree的每个节点前添加复选框(checkbox),这使得用户能够进行多选...

    flex tree的简单使用

    "flex tree的简单使用"这个主题将引导我们了解如何在Flex应用程序中有效地利用Tree组件来展示和操作树状数据。 首先,我们要知道Tree组件是Adobe Flex SDK中的一个控件,它允许用户以节点和子节点的形式查看数据。...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    这个实例涉及的是在Flex中的Tree组件实现节点的内部拖放功能,这对于创建交互式用户界面,尤其是数据层级结构的展示非常有用。在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的...

    flex Twaver组件使用

    TWaver组件是针对Flex和Flash平台的专业图形化组件,由Adobe公司的Flex/Flash技术构建。它为电信行业的运营支撑系统提供了一种富互联网应用(RIA)解决方案,同时也适用于电力、金融、制造、交通等多个领域的软件...

Global site tag (gtag.js) - Google Analytics