Flex Examples

The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="treeDP">
        <root>
            <node label="i) One" />
            <node label="i) Two" />
            <node label="i) Three" />
            <node label="i) Four">
                <node label="ii) One" />
                <node label="ii) Two" />
                <node label="ii) Three">
                    <node label="iii) One" />
                    <node label="iii) Two" />
                </node>
                <node label="ii) Four" />
            </node>
            <node label="i) Five" />
            <node label="i) Six" />
        </root>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="useRollOver:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{treeDP}"
            labelField="@label"
            showRoot="false"
            useRollOver="{checkBox.selected}"
            width="200" />

</mx:Application>

View source is enabled in the following example.