[zt]Flex 3: 构建高级用户界面 使用 Tree 控件6

当数据提供器更新时保持Tree控件打开

默认地，当数据提供器更新数据时Tree控件收缩。下边的例子展示了当数据提供器更新时保持Tree控件打开的方法。
在这个应用程序中，当一个用户单击Button控件时changeProvider()方法更新数据提供器。通常，这会导致Tree控件收缩。然而，Tree控件的渲染事件处理器，renderTree()方法，放置收缩的发生。当changerProvider()方法被调用，当前状态是打开的元素被保存到对象open变量中。当数据被刷新时，被命名为refreshData的Boolean类型的变量被置为true。renderTree()方法调用Tree控件的invalidateList()方法来刷新树的行。然后置refreshDate属性为false，并且重置Tree控件的打开元素属性为open对象变量，这个变量在刷新前就包含了状态是打开的元素。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="initTree()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var open:Object = new Object();
            [Bindable]

            public var refreshData:Boolean = false;
            [Bindable]
            public var switchObj:Object = new Object();
            [Bindable]

            public var firstObj:Object = new Object();
            [Bindable]

            public var firstObj1:Object = new Object();
            [Bindable]

            public var firstObj2:Object = new Object();
            [Bindable]

            public var provider:String = "firstObj";

            private function initTree():void

            {

                firstObj = new Object();
                firstObj.label = "Foods";
                firstObj.children = new Array();
                firstObj1.label = "Fruits";
                firstObj1.children = new Array();
                firstObj2.label = "Oranges";
                firstObj1.children[0] = firstObj2;
                firstObj.children[0] = firstObj1;
                switchObj = firstObj;
            }

            public function changeProvider():void
            {
                open = SampleTree.openItems;
                refreshData = true;
                if (provider == "firstObj")

                {
                    provider = "switchObj";
                    SampleTree.dataProvider = switchObj;
                }
                else

                {
                    provider = "firstObj";
                    SampleTree.dataProvider = firstObj;
                }
            }

            public function renderTree():void{
                if(refreshData){

                    // Refresh all rows on next update.
                    SampleTree.invalidateList();
                    refreshData = false;
                    SampleTree.openItems = open;
                    // Validate and update the properties and layout
                    // of this object and redraw it, if necessary.
                    SampleTree.validateNow();
                }

            }
        ]]>
    </mx:Script>
    <mx:Tree id="SampleTree" render="renderTree()" width="250" dataProvider="{firstObj}" labelField="label" />

    <mx:Button label="Change Data Provider" click="changeProvider()"/>
</mx:Application>