网上很多人在问,Flex中Tree控件怎样设置每个节点不同的icon。
可能我的方法不是最好的,但是作为一个解决方法共享给大家。
其实,解决方法非常简单,就是根据节点的类型,通过递归函数给每个节点设置不同的icon
下面是我自己写的一个组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Tree xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.IViewCursor;
import mx.collections.XMLListCollection;
import mx.controls.treeClasses.ITreeDataDescriptor;
import mx.events.FlexEvent;
[Embed('asset/images/icon/peer_online.png')]
private var peerOnline:Class;
[Embed('asset/images/icon/peer_offline.png')]
private var peerOffline:Class;
[Embed('asset/images/icon/database.png')]
private var database:Class;
[Embed('asset/images/icon/folder.png')]
private var fileDir:Class;
[Embed('asset/images/icon/folder_link.png')]
private var ftp:Class;
[Embed('asset/images/icon/application.png')]
private var msg:Class;
[Embed('asset/images/icon/email.png')]
private var excel:Class;
[Embed('asset/images/icon/tab.png')]
private var text:Class;
[Embed('asset/images/icon/wand.png')]
private var triger:Class;
[Embed('asset/images/icon/script.png')]
private var procedure:Class;
[Embed('asset/images/icon/text_allcaps.png')]
private var oracle815:Class;
[Embed('asset/images/icon/text_bold.png')]
private var oracle817:Class;
[Embed('asset/images/icon/text_columns.png')]
private var oracle9:Class;
[Embed('asset/images/icon/text_dropcaps.png')]
private var oracle10:Class;
[Embed('asset/images/icon/text_heading_1.png')]
private var mssql:Class;
[Embed('asset/images/icon/text_heading_2.png')]
private var mascc:Class;
[Embed('asset/images/icon/text_heading_3.png')]
private var db71:Class;
[Embed('asset/images/icon/text_heading_4.png')]
private var mysql4018:Class;
[Embed('asset/images/icon/text_heading_5.png')]
private var mysql5x:Class;
[Embed('asset/images/icon/text_heading_6.png')]
private var informax73:Class;
[Embed('asset/images/icon/text_horizontalrule.png')]
private var sybase:Class;
[Embed('asset/images/icon/text_horizontalrule.png')]
private var databaseTable:Class;
[Embed('asset/images/icon/text_heading_6.png')]
private var databaseView:Class;
public function resetIcon():void{
if((this.dataProvider as XMLListCollection) != null){
var testXml:XMLList = (this.dataProvider as XMLListCollection).source;
for(var i:Number = 0;i<testXml.child(XmlNodeConst.NODE_PEER).length();i++){
var peerItem:XML = testXml.child(XmlNodeConst.NODE_PEER)[i];
if(peerItem.children().length()==0){
this.setItemIcon(peerItem,peerOffline,peerOffline);
}else{
this.setItemIcon(peerItem,peerOnline,peerOnline);
}
traversalNode(peerItem);
}
}
}
private function traversalNode(nodeXml:XML):void{
var nodeType:String;
for(var j:Number = 0;j<nodeXml.children().length();j++){
var nodeItem:XML = nodeXml.children()[j];
nodeType = nodeItem.@type;
setNodeIcon(nodeType,nodeItem);
traversalNode(nodeItem);
}
}
public function setNodeIcon(nodeType:String,nodeItem:XML):void{
if(nodeType==XmlNodeConst.GROUP_DATABASE){
this.setItemIcon(nodeItem,database,database);
}else if(nodeType==XmlNodeConst.GROUP_FILE_DIR){
this.setItemIcon(nodeItem,fileDir,fileDir);
}else if(nodeType==XmlNodeConst.GROUP_FTP){
this.setItemIcon(nodeItem,ftp,ftp);
}else if(nodeType==XmlNodeConst.GROUP_MSG){
this.setItemIcon(nodeItem,msg,msg);
}else if(nodeType==XmlNodeConst.EXCEL){
this.setItemIcon(nodeItem,excel,excel);
}else if(nodeType==XmlNodeConst.GROUP_TXT){
this.setItemIcon(nodeItem,text,text);
}else if(nodeType==XmlNodeConst.GROUP_TRIGGER){
this.setItemIcon(nodeItem,triger,triger);
}else if(nodeType==XmlNodeConst.GROUP_STORED_PROCEDURE){
this.setItemIcon(nodeItem,procedure,procedure);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_815){
this.setItemIcon(nodeItem,oracle815,oracle815);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_817){
this.setItemIcon(nodeItem,oracle817,oracle817);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_9){
this.setItemIcon(nodeItem,oracle9,oracle9);
}else if(nodeType==XmlNodeConst.DATABASE_ORCLE_10){
this.setItemIcon(nodeItem,oracle10,oracle10);
}else if(nodeType==XmlNodeConst.DATABASE_MSSQL){
this.setItemIcon(nodeItem,mssql,mssql);
}else if(nodeType==XmlNodeConst.DATABASE_MSACCESS2K){
this.setItemIcon(nodeItem,mascc,mascc);
}else if(nodeType==XmlNodeConst.DATABASE_DB2_71){
this.setItemIcon(nodeItem,db71,db71);
}else if(nodeType==XmlNodeConst.DATABASE_MYSQL_4_0_18){
this.setItemIcon(nodeItem,mysql4018,mysql4018);
}else if(nodeType==XmlNodeConst.DATABASE_MYSQL_5X){
this.setItemIcon(nodeItem,mysql5x,mysql5x);
}else if(nodeType==XmlNodeConst.DATABASE_INFORMIX_73){
this.setItemIcon(nodeItem,informax73,informax73);
}else if(nodeType==XmlNodeConst.DATABASE_SYBASE){
this.setItemIcon(nodeItem,sybase,sybase);
}else if(nodeType==XmlNodeConst.DATABASE_TABLE){
this.setItemIcon(nodeItem,databaseTable,databaseTable);
}else if(nodeType==XmlNodeConst.DATABASE_VIEW){
this.setItemIcon(nodeItem,databaseView,databaseView);
}
}
]]>
</fx:Script>
</mx:Tree>
分享到:
相关推荐
默认情况下,Flex Tree控件为每个节点提供预设的图标,如展开/折叠箭头。要去除这些默认图标,我们需要在NodeRenderer类中进行定制。创建一个新的MXML或ActionScript类,继承自mx.controls.treeClasses....
Tree控件是Flex提供的一个组件,用于显示多级节点的数据结构,每个节点可以有子节点。这些节点通常对应于数据模型中的对象,而这些对象可以通过数据提供者与Tree控件关联。数据提供者通常是实现了IFactory接口的对象...
通过为每个节点添加CheckBox,用户可以通过勾选来选择他们感兴趣的项目。 实现这个功能,我们需要遵循以下步骤: 1. **创建自定义TreeItemRenderer**: 首先,我们需要创建一个自定义的TreeItemRenderer类,这个...
每个节点都可以包含子节点,并且可以自定义显示内容,包括文本和图标。图标可以用来增强视觉效果,帮助用户快速识别和理解节点的含义。 在Flex中,你可以通过设置`Icon`属性来为Tree节点添加图标。例如,你可以为根...
Flex Tree组件是Adobe Flex框架中的一个关键元素,用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用,特别是在需要...通过学习和实践提供的源代码,能够进一步提升对Flex Tree控件的理解和应用能力。
在Flex中,为了增加更多的交互性,我们有时需要在Tree的每个节点前添加复选框(checkbox),这使得用户能够进行多选操作。标题提到的“flex Tree checkbox 修改过后”,意味着原生的Flex Tree控件已经进行了自定义...
TreeItemRenderer是用于渲染Tree组件中每个节点的类,我们可以在此类中添加一个CheckBox控件,并根据节点的状态来控制它的选中状态。以下是一个基本的自定义TreeItemRenderer的代码片段: ```actionscript public ...
它由一系列可展开或折叠的节点组成,每个节点可以包含子节点。用户可以通过单击节点来展开或折叠它们,查看其子节点。 2. **Checkbox集成**:在Flex Tree中添加Checkbox,通常是为了提供多选功能。这需要自定义...
在本例中,Tree控件的每个节点将代表一个网页链接,当用户点击某个节点时,触发事件,进而加载对应的网页到iFrame中。 接着,我们来看看iFrame组件。iFrame(Inline Frame)是HTML中用于嵌入另一个文档的元素,通常...
2. **dragEnabled 和 dropEnabled**: Tree 控件的每个节点都有 dragEnabled 属性,用于启用或禁用该节点的拖动功能。同时,Tree 控件本身也有 dropEnabled 属性,控制是否允许其他元素拖放到 Tree 中。 3. **...
这可以通过创建嵌套的数组来实现,每个子数组代表树的一个分支,数组中的元素代表该分支下的节点。例如: ```actionscript var treeData:ArrayCollection = new ArrayCollection([ {label: "一级节点1", children:...
每个节点可能包含一个标识符、文本、子节点列表,以及一个表示是否选中的布尔值。 在提供的压缩包文件中,我们可以看到以下目录: - `libs`:这个目录可能包含了项目所需的一些库文件,比如Flex SDK的某些部分或者...
`flex tree 中渲染checkBox`这个话题涉及到在Flex Tree组件的每个节点上添加复选框控件,使得用户能够通过单击复选框来选择或取消选择树的特定部分。这在数据分层展示和多选操作的场景中特别常见,例如文件管理器或...
数据提供者中的每个项目代表Tree中的一个节点,每个节点可以有子节点。 2. **节点标识符**:每个节点都有一个唯一的标识符,这通常是数据提供者中对象的一个属性。通过设置`itemIDField`属性,我们可以指定哪个字段...
它通常由一系列可展开/折叠的节点组成,每个节点可以包含子节点。Tree组件提供了丰富的定制选项,如自定义节点样式、事件监听以及节点操作等。 2. Checkbox控件:Checkbox是用户界面中常见的一种输入元素,用于提供...
在Flex中,Tree组件是一种常用的控件,用于显示层次结构的数据。本篇文章将聚焦于如何将ArrayCollection转换为XML数据源,并实现Flex Tree组件的新增、删除和修改功能。以下是详细的解释和步骤。 首先,...
1. **自定义渲染器**:为了添加线条,我们需要自定义TreeItemRenderer,这样可以在每个节点上绘制线条。 2. **图形库**:Flex提供了一些基本的图形绘制类,如Graphics,我们可以利用这些类在渲染器中绘制线条。 3. *...
而当我们谈论"flex tree checkbox"时,这意味着我们要在Tree组件的节点上添加复选框,使得用户可以对每个节点进行多选操作,提高交互性和用户体验。 首先,让我们深入了解Flex Tree组件。Tree组件是基于Adobe Flex ...
- MenuItem的创建与事件绑定:每个菜单项都是一个MenuItem对象,需要设置其标签、ID,以及添加点击事件监听器。 4. SDK版本兼容性: 提到的源码适用于Flex SDK 4.5.1,但也可以修改以适应4.0版本。不同版本的...
这通常是一个数组集合,包含多个`Object`,每个`Object`代表树的一个节点。节点可以有子节点,也可以没有。例如: ```actionscript var treeData:ArrayCollection = new ArrayCollection([ {label: "父节点1", ...