`
fantasy
  • 浏览: 513892 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

动态修改Tree的icon图标

    博客分类:
  • Flex
阅读更多
定义ICON渲染器
<mx:Tree id="nodesTree" width="100%" height="100%"
showRoot="false" labelField="@label" 
itemRenderer="common.IconTreeRenderer" />


<root label="A"> 
	<node label="模型" icon="a.png" > 
</root>


ICON Tree渲染器
读取XML里配置的icon图标路径,然后加载到树上面,隐藏树本身的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.*;
	/*
	 *  ICON Tree的渲染器
	 */
	public class IconTreeRenderer extends TreeItemRenderer
	{
		protected var myImage:Image; 
		private var imageWidth:Number = 16;
		private var imageHeight:Number = 16;
		private static var defaultImg:String = "leaf.png";

		public function IconTreeRenderer () 
		{
			super();
		}

		override protected function createChildren():void
		{
			super.createChildren();
			myImage = new Image();
			myImage.source = defaultImg;
			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;
			var imageSource:String=value.@icon;
			if(imageSource!="")
			{
				myImage.source=imageSource;
			}else{
				myImage.source=defaultImg;
			}
		}
		//隐藏原有图标,并设置它的坐标
		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;
				}
			}
		}
	}
}

分享到:
评论

相关推荐

    flex tree 修改icon方法

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

    可编辑el-tree样式功能修改:修改icon、可编辑input、修改下拉展开icon位置

    本文将深入探讨如何对 el-tree 进行样式功能修改,包括更换图标(icon)、实现输入框可编辑以及调整下拉展开图标的定位。我们将基于 Vue.js 框架进行讲解。 首先,让我们了解 el-tree 的基本使用。el-tree 是 ...

    EasyUI_Icon_图标扩展(1775个)

    "EasyUI_Icon_图标扩展(1775个)" 是为了解决这个问题而创建的资源包。这个扩展包增加了1775个额外的图标,极大地丰富了可用的图标库,使得开发者能够选择更适合项目风格和功能需求的图标,提高应用的用户体验和...

    zTree自定义状态图标实现

    4. **事件监听与响应**:zTree提供了丰富的事件系统,如`onClick`、`onCheck`等,我们可以通过监听这些事件,动态改变节点的图标。比如,当用户点击某个节点时,我们可以修改该节点的`icon`属性,然后调用`update...

    修改iview-ui tree树结构默认的小三角形源码

    修改iview-ui tree树结构...可以使用ui库自带的icon图标,也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字,展开/隐藏 子级菜单,同时背景高亮显示 下载后,直接npm install 就可以直接运行

    element-ui tree结构实现增删改自定义功能代码

    通过监听用户操作,修改数据源(`treeData`),并重新渲染Tree组件,可以达到动态更新树结构的效果。这在构建具有层级关系的管理界面时非常有用。为了完整实现这个功能,你需要补充缺失的方法如`nodeDelete`和`...

    JsTree 最详细教程及完整实例

    1. **自定义图标(Custom Icons)**:通过 `icon` 属性,你可以为节点设置自定义图标。 2. **事件处理(Event Handling)**:利用 `on` 方法,可以监听 JsTree 的各种事件,如节点点击、拖放完成等。 3. **API ...

    Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle

    extjs的tree的使用

    对于Tree组件,你可以通过修改`.x-tree-node-icon`、`.x-tree-node-text`等类来调整节点图标和文本的样式。 ### 总结 ExtJS的Tree组件是一个功能强大且高度可定制的工具,用于展示分层数据。通过上述介绍,你应该...

    layui tree树结构源码

    layui tree的样式可以通过修改layui.css文件进行定制,包括节点的背景色、文字颜色、边框、图标等。同时,也可以通过CSS类`layui-tree-icon`、`layui-tree-node`等进行更细致的调整。 7. **扩展功能**: layui ...

    通过CSS样式来修改ExtJS:TreePanel的小图标

    .x-tree-node-collapsed .x-tree-node-icon { background:transparent url(web/css/images/default/tree/1.gif); } .x-tree-node-expanded .x-tree-node-icon { background:transparent url(web/css/images/default...

    zTree(JQuery Tree) v3.1.rar

    * 【修改】放大浏览器后导致 界面出现多余连接线的bug (需要更新:icon 图标和 css ) * 【修改】在编辑状态,如果节点名超过编辑框宽度,左右键在框内不起作用的bug(IE 6 7 8 出现) CSS 中 filter:alpha...

    Jquery.ui.包含(tree)

    可以通过添加特定的类名(如 `ui-icon`)来设置图标。 ```html &lt;ul id="tree"&gt; 节点1 子节点1 子节点2 节点2 ``` - **应用插件**:使用 jQuery 选择器找到树的容器,并调用 `tree` 方法来初始化插件。 ...

    LayUI-Tree.rar

    - **图标控制**:通过`icon`属性,可以设置节点的图标,支持layui内置图标或自定义图标URL。 - **事件绑定**:除了`click`,还有`check`(复选框状态改变)、`spread`(节点展开/折叠)等事件可以监听。 6. **...

    mfc中的 tree的使用

    使用`SetImageList`方法设置图像列表,传入小图标和大图标列表的句柄。 ```cpp CImageList imageList; imageList.Create(16, 16, ILC_COLOR32, 2, 2); // 加载图标资源 imageList.Add(AfxGetApp()-&gt;LoadIcon(IDI_...

    MFC Tree 控件,基本

    它提供了对树控件的各种操作接口,包括添加、删除、选中和修改节点等。 ### 2. 创建 Tree 控件 创建一个树控件通常涉及以下几个步骤: 1. 在资源编辑器中添加一个 `WS_VISIBLE | WS_CHILD | TVS_HASLINES` 样式的 `...

    echart tree(树图)自定义实现 免费下载

    symbol: 'image://path/to/your/icon.png', // 设置节点图标路径 }] ``` 这里,'symbol'属性可以设置为图片URL,也可以是内置的图形,如'square'、'circle'等。 **自定义展示样式:** 节点的样式可以进一步定制,...

    CTreeCtrl+Access+Icon

    3. 设置节点图标:在插入或修改节点时,使用`CTreeCtrl::SetItem()`函数,指定`hItem`(节点句柄)、`mask`(标志,如TVIF_IMAGE和TVIF_SELECTEDIMAGE)、`iImage`(正常状态下图标的索引)和`iSelectedImage`(选中...

    淘宝导航修改代码

    .popup-content.cats-tree.fst-cat-icon{background:url();} ``` 同样的,`url()`应该包含一个指向分类图标的具体URL。 ### 总结 以上就是对“淘宝导航修改代码”的详细解析,主要涵盖了背景颜色设置、边框颜色设置...

Global site tag (gtag.js) - Google Analytics