`

Flex tree组件数据源、图标等修改

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<!-- Tree control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!--下面是样式-->
<mx:Style >
Tree
{
verticalScrollBarStyleName: treeVerticalScrollBar;
selectionColor: #417597;
/*为默认、打开、关闭、有子项等几个状态添加不同的ico*/
defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif");
folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif");
folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif");
disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif");
}
.treeVerticalScrollBar
{
borderColor: #f00;
}
</mx:Style>
<mx:Script>
<![CDATA[
//绑定数据,定义xml类型变量用于存放选中节点
[Bindable]
public var selectedNode:XML;
//当tree发生change事件时的事件
public function treeChanged(event:Event):void {
//将选中的节点转换成xml,赋予selectedNode,as为转换类型
selectedNode=Tree(event.target).selectedItem as XML;
}
//tree有3个事件使用较多,change、itemClick、itemOpen、itemClose
//change:选中列改变时被触发
//itemClick:点击某一列时触发
//itemOpen:节点展开时触发
//itemClose:节点关闭时触发
]]>
</mx:Script>
<!--XMLList作为数据源是最适合于tree组件的-->
<mx:XMLList id="treeData">
<node label="Mail Box">
<node label="Inbox">
<node label="Marketing"/>
<node label="Product Management"/>
<node label="Personal"/>
</node>
<node label="Outbox">
<node label="Professional"/>
<node label="Personal"/>
</node>
<node label="Spam"/>
<node label="Sent"/>
</node>
</mx:XMLList>
<mx:Panel title="Tree Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBox width="100%" height="100%">
<!--@表示xml中间点的属性,如:@label表示label属性的值-->
<!--dataProvider="{treeData}"表示绑定数据,数据源可以是XML也可以是XMLList-->
<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"
showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>
<mx:TextArea height="100%" width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</mx:Application>
 

 

分享到:
评论

相关推荐

    flex tree 修改icon方法

    综上所述,修改Flex Tree的icon涉及到创建自定义渲染器、数据绑定、根据数据源动态设置图标等步骤。理解这些概念和技巧对于构建具有个性化视觉效果的Flex应用程序至关重要。在实践中,需要注意代码的可维护性和性能...

    Flex tree的用法

    - **XML数据绑定**: Tree组件可以轻松地绑定到XML数据源。XML的层级结构非常适合表示树形结构,每个XML元素对应Tree的一个节点。 - **XMLList和XMLListCollection**: 将XML转换为XMLList或XMLListCollection,然后...

    flex4Tree组件分层显示数据示例

    首先,Tree组件的基础在于XML数据源。在Flex4中,我们可以使用ArrayCollection或XMLListCollection作为数据提供者,将XML结构转换为可操作的数据模型。在提供的源码中,你可能会看到一个XML文件,其中包含层次化的...

    flex tree icon

    通常,这样的博客会包含代码示例,演示如何在ActionScript中创建和配置Tree组件,如何处理数据源,以及如何设置和更换图标。 标签“源码”提示我们,这个话题可能涉及到实际的代码实现。理解Flex Tree的源码有助于...

    flex tree控件

    Tree控件的数据源通常是ArrayCollection或XMLListCollection,它们包含一系列对象,每个对象代表树的一个节点。通过数据绑定,我们可以将这些数据对象映射到Tree的可视节点上。 3. 自定义节点图标: 默认情况下,...

    flex tree的简单使用

    1. **数据源**:Tree组件的数据来源于一个数据提供者,它可以是ArrayCollection、XMLListCollection或其他实现了 IList 接口的对象。数据提供者中的每个项目代表Tree中的一个节点,每个节点可以有子节点。 2. **...

    flex tree checkbox

    在Flex中,Tree组件是一个非常实用的控件,它允许用户以树状结构展示数据,便于层级关系的管理和操作。而当我们谈论"flex tree checkbox"时,这意味着我们要在Tree组件的节点上添加复选框,使得用户可以对每个节点...

    Flex 下拉框为Tree的ComboBox

    当需要处理具有树状结构的数据时,如部门结构、地区分类等,就需要对其进行定制,将其下拉部分转换为一个Tree组件,这就是所谓的"Flex下拉框为Tree的ComboBox"。 首先,我们来看一下如何实现这个功能。在Flex中,...

    各种Flex自定义组件

    在“Atms_Flex_Common”这个压缩包文件中,可能包含了这些自定义组件的源代码、示例应用程序和相关文档。通过查看和研究这些代码,开发者可以学习到如何在自己的Flex项目中实现类似的自定义组件,提高应用的效率和...

    flex4 选择树组件

    2. **数据绑定**:Tree组件的数据源通常是ArrayCollection或XMLListCollection等可迭代数据集。你可以通过`dataProvider`属性将数据绑定到Tree上,每个节点的数据项会被映射到Tree的子节点。 3. **节点表示**:Tree...

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

    在Flex 3中实现这个功能,我们可以利用Flex的Tree组件和CheckBox组件,结合XML数据源来构建这个自定义的控件。以下是一个详细步骤的概述: 1. **创建Tree组件**:首先,我们需要创建一个Tree组件,这是展示树状结构...

    flex树自定义节点图标

    Flex Tree(灵活的树)是一种能够动态展示层级关系的组件,广泛应用于各种业务场景,例如文件系统、组织结构、菜单导航等。本主题将深入探讨如何在Flex Tree中实现自定义节点图标,以及与之相关的源码分析。 1. **...

    Flex的组件

    - 数据源:菜单项通常由数组集合提供,开发者可以指定一个包含菜单项信息(如标题、图标和关联命令)的数据源。 - 事件处理:菜单项的选择通常会触发事件,如`itemClick`,开发者需要为此编写事件处理器。 - 配置项...

    flex的组织结构图组件

    关于压缩包子文件的文件名称列表中的“SpringGraph_20061210”,这可能是一个特定版本的Flex组织结构图组件库或者一个示例项目,其中包含有关如何使用该组件的源代码和资源。"SpringGraph"可能是指一种具有弹性效果...

    Flex combox

    Tree组件是Flex中用于显示层次结构数据的控件,它可以展开和折叠节点,用户可以通过点击加号(+)或减号(-)图标来展开或折叠节点。每个节点可以包含文本、图像或者其他的UI组件。 在实现"带复选框的树状下拉框"时...

    flex可扩展,动态改变图标的小树

    1. **显示根节点会报错**:在Flex的Tree组件中,默认情况下不显示根节点。如果需要显示,可能需要手动设置`showRoot`属性为`true`,然后处理可能出现的错误,例如,确保数据源正确配置,避免空引用等问题。 2. **xml...

    Flex 基于数据源的Menu Tree实现代码

    在本文中,我们将探讨如何使用Flex创建一个基于数据源的Menu Tree,特别是如何利用外部参数来指定数据源,并自定义节点的图标。 首先,让我们分析标题和描述中的关键知识点: 1. **数据源**:在Flex中,数据源通常...

    flex 树状图

    在Flex中,树状图的数据通常由XML或ArrayCollection提供,通过定义数据模型来绑定到Tree组件。 创建树状图的第一步是设置数据源。这可以通过将ArrayCollection或XML对象绑定到Tree的dataProvider属性来实现。...

    30多个 flex3 源码(整理)

    6. **Tree下拉列表里含有Menu样式**:Flex的Tree组件可以嵌套各种组件,包括下拉列表。通过定制TreeItemRenderer,我们可以实现树节点点击后展开一个具有Menu样式的下拉列表,提供更丰富的交互体验。 7. **flex的增...

Global site tag (gtag.js) - Google Analytics