Tree:
<mx:Tree dataProvider="{datatree}" showRoot="false" labelField="name" itemRenderer="common.IconTreeRenderer" width="100%" height="100%"/>
数据源datatree:
{"resource": {"application": "PostgreSQL Database Server", "app_uid": "/zport/dmd/Processes/UserApp/Database/PostgreSQL Database Server", "permission_type": "local"}, "uid": "/zport/dmd/Processes/UserApp/Database/PostgreSQL Database Server", "sIconUrl": "/zport/dmd/Processes/process/ls_zport_dmd_Processes_UserApp_Database_PostgreSQL_Database_Server.ico", "bIconUrl": "/zport/dmd/Processes/process/lb_zport_dmd_Processes_UserApp_Database_PostgreSQL_Database_Server.ico", "children": [], "name": "PostgreSQL Database Server"}, {"resource": {"application": "MySQL Database Server", "app_uid": "/zport/dmd/Processes/UserApp/Database/MySQL Database Server", "permission_type": "local"}, "uid": "/zport/dmd/Processes/UserApp/Database/MySQL Database Server", "sIconUrl": "", "bIconUrl": "", "children": [], "name": "MySQL Database Server"}
Tree ItemRenderer
读取JSON里配置的sIconUrl图标路径,然后加载到树上面,隐藏树本身的ICON图标。
package common
{
import flash.xml.*;
import mx.collections.*;
import mx.controls.Alert;
import mx.controls.Image;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
/**
*
* @author shilei, corporation YD
**/
public class IconTreeRenderer extends TreeItemRenderer
{
[Embed(source="assets/devClass/app.png")] //这是图片的相对地址
[Bindable]
public var app:Class;
protected var myImage:Image;
private var imageWidth:Number = 16;
private var imageHeight:Number = 16;
// private static var defaultImg:String = "assets/devClass/app.png";
public function IconTreeRenderer()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
myImage = new Image();
myImage.source = app; //初始化设置默认图标
myImage.width=imageWidth;
myImage.height=imageHeight;
myImage.setStyle( "verticalAlign", "middle" );
addChild(myImage);
}
//通过覆盖data方法来动态设置tree的节点图标 //修改此函数
override public function set data(value:Object):void
{
super.data = value;
if(!value || !myImage)return;
var imageSource:String=value.sIconUrl;
if(imageSource!="")
{
myImage.source='http://192.168.1.146:8080'+imageSource;
}else{
myImage.source=app;
}
}
//隐藏原有图标,并设置它的坐标
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void//下面函数照抄不变!
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data !=null)
{
if (super.icon != null)
{
myImage.x = super.icon.x;
myImage.y = 2;
super.icon.visible=false;
}
else
{
myImage.x = super.label.x;
myImage.y = 2;
super.label.x = myImage.x + myImage.width + 17;
}
}
}
}
}
这个ItemRenderer用上之后,以后就可以直接根据JSON或XML的值自动更改图标而不用自己去遍历手动修改了,不过如果是本地图标最好用Embed绑定编译到程序里面,否则放到服务器会找不到图片,服务器存的图片可以直接用路径取:)
参考:http://blog.sina.com.cn/s/blog_51e82bab0100fy5e.html
分享到:
相关推荐
flex 修改 tree的icon,根据数据源root 中不同的参数修改不同的图片。
flex渲染器flex渲染器flex渲染器
flex中渲染器简介 本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。
flex带复选框的tree,包含源代码,需要用到的朋友请下载
flex itemRenderer 渲染机制的概念和使用
提供:Flex4 的 DataGrid 组件,Tree组件 的基本使用和事件。 并 附:自定义条目渲染器 使用
在网上找到了关于flex 的tree在前面加上checkbox, 我经过改动, 现在很适合使用。
NULL 博文链接:https://demojava.iteye.com/blog/1405668
flexBulider页面加载动态图片的显示
flex中利用tree中的子节点与自定义组件实现的在同一页面中实现导航
里面收集了一些Flex的tree控件的用法和实例的源代码
flex tree 教程二
这个是带有checkbox的tree,下载即可使用哦。
flex 中tree渲染checkbox,支持复选多选。
简单的一个自定义label.根据dataGrid的数据变色.压缩包里一个是渲染器..一个是主程序....新建一个flex项目...把mxml和文件夹都放在scr下面就可以跑起来了..有问题请回复.
去掉flex tree控件默认的图标并加上线连接。
flex tree 拖拽,flex tree 节点移动。
图标在list上 单击可以实现切换 左右滑动切换 分享下
flex tree+checkbox可实现级联勾选 修改后 修改CheckTreeDemoRenderer.as这个文件中 while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED) { noChecks++; }else if (cursor.current.@state =...
flex tree 复选框,以及父目录的三种状态。(全部选中,部分选中,没有选中)