Flex 4.1 SDK
我正在使用mx:Tree组件加载静态 xml 数据以将其引入树形。我有一个 HDDivided 框，其中我的左侧部分将包含树，而右侧主要部分将是一个边框容器，其中包含 Flex IFrame 组件。
在 creationComplete 事件中，我为 Tree 组件的 dataprovider 分配了静态 xml 数据。树加载了 xml 数据。如果我在树中选择任何特定的叶节点，右侧部分（即边框容器内的 IFrame）应该加载与所选节点数据对应的 html 内容。没有问题。
我遇到的问题是在我加载 flex 模块之后，
步骤1 ：
在不选择任何顶部节点的情况下，我选择（单击）E 下的节点 E1。相应的 HTML 内容被顺利加载。
第2步：
然后，如果我选择 D 分支下的 D2 节点，则 D2 的选择不会发生，它会与 E1 本身保持一致。显然，itemClick 处理程序会将所选项目作为 E1 并再次加载相同的 E1 内容。
选择不会更改为 D2。
相反，如果我选择 D2 以外的任何其他节点，例如 D1、C1、C2 等，则节点的选择会发生变化，并且相应节点的 HTML 内容会正确加载。
为什么选择没有改变？树中的最后一个节点有问题吗？
测试.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>
这是我在应用程序中使用的实际代码。
测试模块.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>
测试.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>