Flex 4.1 SDK
我使用 mx：Tree 组件加载静态xml数据以将其以树形式显示。我有一个HDivided盒子，我的左侧部分将有树，而右侧主要部分将是一个带有Flex IFrame组件的边框容器。
在creationComplete事件中，我使用静态xml数据分配Tree组件的数据提供者。树加载了xml数据。如果我选择树中的任何特定叶节点，则应该使用与所选节点数据相对应的html内容加载右侧部分（即边框容器内的IFrame）。没问题。
我遇到的问题是加载flex模块后，
第1步：
在不选择任何顶级节点的情况下，我选择（点击）E下的节点E1。相应的HTML内容被平滑加载。
第2步：
然后，如果我在D分支下选择D2节点，则不会选择D2，而是保留E1本身。显然，itemClick处理程序将所选项目作为E1，并再次加载相同的E1内容。
选择不会更改为D2。
相反，如果我选择除D2之外的任何其他节点，如D1，C1，C2等，则节点的选择会更改，并且相应节点的HTML内容会正确加载。
为什么选择不会改变？树中的最后一个节点是否有任何问题？
的test.xml
<root>
<A label="A">
<menu label="A1" />
<menu label="A2" />
<menu label="A3" />
<menu label="A4" />
</A>
<B label="B">
<menu label="B1" />
<menu label="B2" />
<menu label="B3" />
</B>
<C label="C">
<menu label="C1" />
<menu label="C2" />
<menu label="C3" />
</C>
<D label="D">
<menu label="D1" />
<menu label="D2" />
</D>
<E label="E">
<menu label="E1" />
</E>
</root>
FxTree.mxml（应用程序容器）
<?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"
width="100%" height="100%"
creationComplete="onCreationComplete(event)">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<fx:XML id="xmldata" source="/xml/test.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ListEvent;
[Embed('/assets/icons/branch.png')]
public const branchIcon:Class;
[Embed('/assets/icons/nobranch.png')]
public const nobranchIcon:Class;
[Embed('/assets/icons/chart.png')]
public const chartIcon:Class;
[Bindable]
private var treeData:XMLListCollection;
/**
* Function for setting the node icons
* of 'systemdashboardTree'
*/
private function setTreeIcon(item:Object):Class {
var iconClass:Class;
var classType:String = XML(item).attribute("icon");
if(classType!="")
return this[classType];
else
return null;
}
/**
* Function called on 'creationComplete' event
* for feeding data to 'systemdashboardTree'
*/
protected function onCreationComplete(event:FlexEvent):void
{
treeData = new XMLListCollection(new XMLList(xmldata));
fxTree.dataProvider = treeData;
}
/**
* Function which handles the systemdashboardTree's
* itemDoubleClick event
*/
protected function onItemDoubleClick(event:ListEvent):void
{
var item:Object = Tree(event.currentTarget).selectedItem;
if (fxTree.dataDescriptor.isBranch(item)) {
fxTree.expandItem(item, !fxTree.isItemOpen(item), true);
}
}
/**
* Function for loading the selected dashboard
*/
private function loadDashboard(event:ListEvent):void {
var item:Object = event.currentTarget.selectedItem;
Alert.show(item.@label);
}
]]>
</fx:Script>
<s:Panel height="100%"
width="100%"
title="FxTree"
borderColor="#CCCCCC">
<mx:HDividedBox height="100%" width="100%">
<s:BorderContainer height="100%" width="20%" borderColor="#CCCCCC">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Tree id="fxTree"
width="100%" height="100%"
labelField="@label"
showRoot="false"
allowMultipleSelection="false"
doubleClickEnabled="true"
itemClick="loadDashboard(event)"
itemDoubleClick="onItemDoubleClick(event)"
borderSkin="{null}"/>
</s:BorderContainer>
<s:BorderContainer id="dashboardContainer" height="100%" width="80%" borderColor="#CCCCCC" />
</mx:HDividedBox>
</s:Panel>
</s:Application>
这是我在我的应用程序中使用的实际代码。
TestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%">
<fx:Declarations>
<fx:XML id="data" source="/xml/Test.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.FlexEvent;
[Bindable]
private var treeData:XMLListCollection;
]]>
</fx:Script>
<mx:Tree id="trendsTree"
width="50%" height="50%"
labelField="@label"
dataProvider="{data}"
horizontalCenter="0" verticalCenter="0"
showRoot="false"/>
</mx:Module>
的test.xml
<root>
<A label="A">
<menu label="A1" />
<menu label="A2" />
<menu label="A3" />
<menu label="A4" />
</A>
<B label="B">
<menu label="B1" />
<menu label="B2" />
<menu label="B3" />
</B>
<C label="C">
<menu label="C1" />
<menu label="C2" />
<menu label="C3" />
</C>
<D label="D">
<menu label="D1" />
<menu label="D2" />
</D>
<E label="E">
<menu label="E1" />
</E>
</root>