Flex Change tree node icon 2 ways to introduce _flex

Source: Internet
Author: User
Tags xmlns
method One: Depending on whether there are child nodes to change
Copy Code code as follows:

<fx:Style>
@namespace S "Library://ns.adobe.com/flex/spark";
@namespace mx "LIBRARY://NS.ADOBE.COM/FLEX/MX";
Mx| tree{
/* Remove default folder icon * *
Folderclosedicon:embed (source= ' resource/region.png ');
Folderopenicon:embed (source= ' resource/region.png ');
/* Remove leaf node icon
Defaultleaficon:classreference (NULL);
*/
/*
DEFAULTLEAFICON Specifies the leaf icon
A closed branch node is displayed next to the icon specified by Disclosureclosedicon. The default icon is a black triangle.
An open branch node is displayed next to the icon specified by Disclosureopenicon. The default icon is a black triangle.
Folderclosedicon closes a branch node of the specified folder icon.
FOLDEROPENICON specifies a branch node of the Open folder icon.
For example: Triangle icon to modify the following code can be replaced with their own:
Disclosureopenicon:embed (source= ' resource/region.png ');
Disclosureclosedicon:embed (source= ' resource/region.png ');
*/
}
</fx:Style>

method Two: According to the properties of the node, flexible change Icon
Copy Code code as follows:

<?xml version= "1.0" encoding= "Utf-8"?>
<s:application xmlns:fx= "http://ns.adobe.com/mxml/2009"
Xmlns:s= "Library://ns.adobe.com/flex/spark"
xmlns:mx= "Library://ns.adobe.com/flex/mx" minwidth= "955" minheight= ">"
<fx:Script>
<! [cdata[
]]>
</fx:Script>
<fx:Declarations>
<!--place non-visual elements (such as services, value objects) here-->
<fx:xml id= "Treedata" >
<root>
<node label= "CI Configuration Items" iconname= "Computer.png" >
<node label= "Resources" iconname= "Computer.png" >
<node label= "Hardware Resources" iconname= "Computer.png" >
<node label= "Hardware Device" iconname= "Computer.png" >
</node>
<node label= "Hardware module" iconname= "Computer.png" >
<node label= "Port" iconname= "Computer.png" >
</node>
</node>
</node>
</node>
</node>
<node label= "dictionary" iconname= "Dictionary.png" >
</node>
</root>
</fx:XML>
</fx:Declarations>
<mx:tree left= "5" top= "5" bottom= "5" width= "" dataprovider= "{treedata}"
Id= "Mytree"
Showroot= "false"
Labelfield= "@label"
Itemrenderer= "Com.flex.tree.dynamicicontree.IconTreeRenderer" >
</mx:Tree>
</s:Application>
Package Com.flex.tree.dynamicicontree
{
Import flash.xml.*;
Import mx.collections.*;
Import Mx.controls.Image;
Import mx.controls.listclasses.*;
Import mx.controls.treeclasses.*;
Import Mx.styles.StyleManager;
/*
* ICON Tree Rendering device
*/
public class Icontreerenderer extends Treeitemrenderer
{
protected Var myimage:imagerenderer;
private var imagewidth:number = 16;
private var imageheight:number = 16;
private static var defaultimg:string = "Windows.png";
Public Function Icontreerenderer ()
{
Super ();
}
Override protected function Createchildren (): void
{
Super.createchildren ();
MyImage = new Imagerenderer ();
Myimage.source = defaultimg;
Myimage.width=imagewidth;
Myimage.height=imageheight;
Myimage.setstyle ("VerticalAlign", "Middle");
AddChild (MyImage);
}
Dynamically set the tree node icon by overwriting the data method
Override public Function set data (value:object): void
{
Super.data = value;
var imagesource:string=value. @iconName. toString ();
if (imagesource!= "")
{
Myimage.source=imagesource;
}else{
myimage.source=defaultimg;
}
}
Hide the original icon and set its coordinates
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;
}
}
}
}
}
Package Com.flex.tree.dynamicicontree
{
Import Mx.controls.Image;
public class Imagerenderer extends Image
{
private var defaulturl:string = "assets/icon/";
public Var iconname:string;
Public Function Imagerenderer ()
{
Super ();
}
Override Public Function set source (url:object): void{
Super.source = defaulturl + URL;
Iconname = URL as String;
}
}
}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.