25
Jan
08

Removing leaf icons from the Flex Tree control

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.

View MXML

<?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);" />

3 Responses to “Removing leaf icons from the Flex Tree control”


  1. 1 Patrick T Evans Jul 16th, 2008 at 2:15 pm

    This does not work for me in Flex 3. The folders still remain

  2. 2 Ivan Solntcev Jul 29th, 2008 at 5:08 am

    Thank you, useful post.

  3. 3 judah Aug 29th, 2008 at 10:42 pm

    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/

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".