[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>