In a previous example, “Removing folder icons from the Flex Tree control”, we saw how to remove the folder icons from a Tree control in Flex so only the disclosure (arrow) icons were visible. In the following example we look at a similar technique for removing the default leaf icons from the Tree control in Flex.
The short answer, set the defaultLeafIcon style to null using CSS, as shown in the following snippet:
<mx:Style>
Tree {
defaultLeafIcon: ClassReference(null);
}
</mx:Style>
The long answer? Keep reading!
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/25/removing-leaf-icons-from-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="dp">
<mlb>
<league label="American League">
<division label="East">
<team label="Boston" />
<team label="New York" />
<team label="Toronto" />
<team label="Baltimore" />
<team label="Tampa Bay" />
</division>
<division label="Central">
<team label="Cleveland" />
<team label="Detroit" />
<team label="Minnesota" />
<team label="Chicago" />
<team label="Kansas City" />
</division>
<division label="West">
<team label="Los Angeles" />
<team label="Seattle" />
<team label="Oakland" />
<team label="Texas" />
</division>
</league>
</mlb>
</mx:XML>
<mx:Style>
Tree {
defaultLeafIcon: ClassReference(null);
}
</mx:Style>
<mx:Tree id="tree"
dataProvider="{dp.league}"
labelField="@label"
iconField="@icon"
showRoot="true"
width="320"
rowCount="9" />
</mx:Application>
View source is enabled in the following example.
If you want to set the defaultLeafIcon style to null in MXML, you could use the following snippet:
<mx:Tree id="tree"
dataProvider="{dp.league}"
defaultLeafIcon="{null}"
labelField="@label"
iconField="@icon"
showRoot="true"
width="320"
rowCount="9" />
Or, if you want to set the defaultLeafIcon style in ActionScript, you could use the following snippet:
<mx:Tree id="tree"
dataProvider="{dp.league}"
labelField="@label"
iconField="@icon"
showRoot="true"
width="320"
rowCount="9"
initialize="tree.setStyle('defaultLeafIcon', null);" />
This does not work for me in Flex 3. The folders still remain
Thank you, useful post.
Hi Peter,
I’m trying to write a tutorial on creating a simple item renderer for the Tree control. Unfortunately I haven’t seen one example online where an item renderer is created in MXML. Can you be the first to create one? In my example I’m using the tree to show a list of items exactly the same as one of the blocks on the sidebar here, http://www.flexcapacitor.com/developer/. At that link I want to replicate the look of the pages section.
This is the code I have so far and it all falls apart:
<mx:Tree left="8" rowHeight="16" dataProvider="{pages1}" labelField="title" width="100%" styleName="sideBarTreeStyle" height="0%" alpha="1" indentation="10" creationComplete="{event.currentTarget.openItems = pages1}"> <mx:itemRenderer> <mx:Component> <mx:Canvas width="100%" height="100%"> <mx:Script> <![CDATA[ import mx.controls.Tree; ]]> </mx:Script> <mx:HBox width="100%" horizontalGap="0" height="100%"> <mx:Image source="images/list_bullet.png" horizontalAlign="center" verticalAlign="middle" visible="{(!Tree(owner).dataDescriptor.isBranch(data))}" includeInLayout="{(!Tree(owner).dataDescriptor.isBranch(data))}" height="100%"/> <mx:Label text="{data.title}" height="100%" width="100%"/> </mx:HBox> </mx:Canvas> </mx:Component> </mx:itemRenderer> </mx:Tree>With this code the indentation is messed up, the label is not positioned correctly and the image is not positioned correctly. Basically everything in my component is not positioned correctly. This code works fine in a list component?
Judah
PS You’ve got to get this installed on this blog, http://txfx.net/code/wordpress/subscribe-to-comments/