How do I create a Tree itemRenderer?
Problem
You cannot use a dropIn itemRenderer for Tree like you can for other List based components like DataGrid, TileList or List.
Solution
I've found that if you want to change some small functionality of the Tree, it is easiest to create an itemRenderer that extends the TreeItemRenderer class.
Detailed explanation
Below, I've created an example that changes the text color of branches
to purple, bold text. It also adds some text to each folder label that indicates how many objects are in that particular branch.
package
{
import mx.controls.treeClasses.*;
import mx.collections.*;
public class CustomTreeItemRenderer extends TreeItemRenderer
{
public function CustomTreeItemRenderer()
{
super();
mouseEnabled = false;
}
override public function set data(value:Object):void
{
if(value != null)
{
super.data = value;
if(TreeListData(super.listData).hasChildren)
{
setStyle("color", 0x660099);
setStyle("fontWeight", 'bold');
}
else
{
setStyle("color", 0x000000);
setStyle("fontWeight", 'normal');
}
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data)
{
if(TreeListData(super.listData).hasChildren)
{
var tmp:XMLList = new XMLList(TreeListData(super.listData).item);
var myStr:int = tmp[0].children().length();
super.label.text = TreeListData(super.listData).label + "(" + myStr + " objects)";
}
}
}
}
}
Report abuse
