树结构控件实例 TreeControl

树结构控件实例

书：157

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

        <fx:XMLList id="treedata" xmlns="">

            <node label="我的邮箱" >

                <node label="收件箱" >

                    <node label="家书" />

                    <node label="朋友" />

                    <node label="商务" />

                </node>

                <node label="发件箱" >

                    <node label="公务" />

                    <node label="私人" />

                </node>

                <node label="垃圾邮件" />

            </node>

        </fx:XMLList>

    </fx:Declarations>

    <fx:Script>

        <![CDATA[

            import mx.events.ListEvent;

            [Bindable]public var selectNode:Object;

            protected function mytree_changeHandler(event:Event):void

            {

                // TODO Auto-generated method stub

                selectNode=Tree(event.target).selectedItem;

            }

        ]]>

    </fx:Script>

    <mx:Panel title="树结构控件实例" height="75%" width="75%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" >

        <mx:HDividedBox width="100%" height="100%">

            <mx:Tree id="mytree" width="50%" height="100%" labelField="@label" showRoot="false" dataProvider="{treedata}" change="mytree_changeHandler(event)">

            </mx:Tree>

            <mx:TextArea height="100%" width="50" text="所选项目：{selectNode.@label}" />

        </mx:HDividedBox>

    </mx:Panel>

</s:Application>