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