Flex Examples

The following example shows how you can use the openItems property to determine which branches are currently open in a Flex Tree control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/01/determining-which-tree-branches-are-open-using-the-openitems-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.TreeEvent;
            import mx.utils.ObjectUtil;

            private function tree_openItems_change(evt:TreeEvent):void {
                /* Set the array and let binding do the real work. */
                openItemArr = tree.openItems as Array;
            }
        ]]>
    </mx:Script>

    <mx:Array id="openItemArr" />

    <mx:XML id="xmlDP">
        <node>
            <node label="1.a" />
            <node label="1.b" />
            <node label="1.c">
                <node label="1.c.i" />
                <node label="1.c.ii" />
                <node label="1.c.iii" />
                <node label="1.c.iv" />
                <node label="1.c.v" />
            </node>
            <node label="1.d" />
            <node label="1.e">
                <node label="1.e.i" />
                <node label="1.e.ii" />
                <node label="1.e.iii">
                    <node label="1.e.iii.A" />
                </node>
                <node label="1.e.iv" />
            </node>
            <node label="1.f" />
        </node>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="Tree openItems length: {openItemArr.length}" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox width="100%">
        <mx:Tree id="tree"
                dataProvider="{xmlDP}"
                labelField="@label"
                showRoot="false"
                width="50%"
                rowCount="8"
                itemOpen="tree_openItems_change(event);"
                itemClose="tree_openItems_change(event);" />

        <mx:List id="list"
                dataProvider="{openItemArr}"
                labelField="@label"
                width="50%"
                height="100%" />

        <mx:TextArea id="textArea"
                editable="false"
                text="{ObjectUtil.toString(openItemArr)}"
                width="50%"
                height="100%" />
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.