The following example shows how you can remove the folder icons from the Tree control in Flex so that only the disclosure (arrow) icons and leaf icons are visible.
The short answer, set the folderClosedIcon and folderOpenIcon styles to null using CSS, as shown in the following snippet:
<mx:Style>
Tree {
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null);
}
</mx:Style>
The long answer?
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/25/removing-folder-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 {
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null);
}
</mx:Style>
<mx:Tree id="TreeProject"
dataProvider="{dp.league}"
labelField="@label"
iconField="@icon"
showRoot="true"
width="320"
rowCount="9" />
</mx:Application>
View source is enabled in the following example.
For an example of removing leaf icons from the Tree control in Flex, see “Removing leaf icons from the Flex Tree control”.
Thanks for the post. This is exactly what I needed, but I find that once I put the code into a component (based on Canvas), it stops working (but with no error messages)? I’m still relatively new to Flex and I’m sure it’s something I’m missing. Is there any reason I can only make this work in the Application wrapper?
Sonia,
I’m unable to reproduce the behavior in Flex 2 or Flex 3 using the example above with the following snippet:
<mx:Canvas> <mx:Tree id="TreeProject" dataProvider="{dp.league}" labelField="@label" iconField="@icon" showRoot="true" width="320" rowCount="9" /> </mx:Canvas>Does that work for you? If so, how is your code different. If that code doesn’t work for you, yikes! Which version of the Flex SDK are you running?
Peter