Flexlib树控件的使用

一般我们在开发中都会用到树控件，典型的用法就是初始化树，单击树的某个节点根据节点的数据展现不同的内容，这里简单的说明下Flexlib中ConvertibleTreeList的用法，包括初始化树，树事件获取节点数据，代码简单，如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
    xmlns:flexlib=" http://code.google.com/p/flexlib/"
    creationComplete="init();">
    <mx:Script>
        <![CDATA[
            import mx.controls.*;
            private function init():void {
                var xml:XML =
                    <node>
                        <group label="目录1" id="1">
                            <example label="节点1" showInList="true" id="6" />
                            <example label="节点2" showInList="true" id="5" />
                            <example label="节点3" showInList="true" id="8" />
                        </group>
                        <group label="目录2" number="2">
                            <example label="节点1" showInList="true" id="9" />
                            <example label="节点2" showInList="true" id="10" />
                            <example label="节点3" showInList="true" id="7" />
                        </group>
                        <group label="目录3" number="3">
                            <example label="节点4" showInList="true" id="4" />
                        </group>
                    </node>;
                ctree.dataProvider = xml;
            }   

        //奇怪在Flex的自带Tree都有itemClick事件，Flex树居然没有，只能使用click

       private function tree_itemClick(evt:Event):void { 

                //通过下面的代码可以获得当前点击节点的数据，如：<example label="节点1" showInList="true" icon="slider_icon" number="6" />
                var data:XML = evt.currentTarget.selectedItem as XML;
                Alert.show("id:"+data.@id + ";label:"+data.@label);
            }
        ]]>
    </mx:Script>
    <mx:Panel layout="vertical" title="Example 1" width="300">
        <mx:Canvas borderStyle="solid" width="100%" >
            <flexlib:ConvertibleTreeList id="ctree"
                width="100%" height="150"
                showRoot="false"
                labelField="@label"
                 listField="showInList"
                 click="tree_itemClick(event)"
                 name="@number"
                />
        </mx:Canvas>
    </mx:Panel>
</mx:Application>

 

效果：