Posted on 2007-04-15 20:50
云自无心水自闲 阅读(6085)
评论(0) 编辑 收藏 所属分类:
Flex 、
心得体会 、
Flex2
一个动态修改Tree节点标签的例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left"
creationComplete="initApp()">
<mx:Script><![CDATA[
[Bindable]public var _xmlData:XML;
[Bindable]private var _xmlCur:XML;
private function initApp():void
{
//set the test data
_xmlData =
<node label="Mail Box">
<node label="Inbox"/>
<node label="Deleted mail"/>
<node label="Personal"/>
<node label="Professional"/>
<node label="Spam"/>
<node label="Sent"/>
</node>
myTree.selectedItem = myTree.dataProvider[0]; //select the first node
callLater(expandTreeNode, [myTree.selectedItem]); //use callLater to expand that node
}//initApp
private function expandTreeNode(myXMLNode:XML):void{
myTree.expandChildrenOf(myXMLNode,true); //expand the node
_xmlCur = XML(myTree.selectedItem); //set the bindable variable
}
private function oChangeTree(oEvent:Event):void
{
_xmlCur = XML(oEvent.target.selectedItem); //set the bindable variable
}//
private function updateNode(oEvent:Event):void
{
var xmlSelected:XML = XML(myTree.selectedItem) //get a reference to the selected node
xmlSelected.@label = tiLabel.text; //set the label attribute
}//updateNode
]]></mx:Script>
<mx:Label text="Update selected Node label" />
<mx:TextInput id="tiLabel" text="{_xmlCur.@label}" change="updateNode(event)" />
<mx:HBox>
<mx:Tree id="myTree" width="200" height="200" labelField="@label"
showRoot="true"
dataProvider="{_xmlData}"
change="oChangeTree(event)" />
<mx:DataGrid id="dg" dataProvider="{_xmlData.node}" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Name" dataField="@label" />
</mx:Array>
</mx:columns>
</mx:DataGrid>
<mx:Label text="{_xmlCur.@label}" />
</mx:HBox>
</mx:Application>
应用中主要包含4个组件, 一个TextInput, 一个Tree, 一个DataGrid, 一个Label
1. 先看Tree, Tree使用_xmlData作为数据源, 定义一个change事件处理函数, 将当前节点存储到_xmlCur变量中.
2. TextInput的数据源就是_xmlCur的label属性, 也就是Tree当前节点的标签. 他也定义了一个change事件处理函数, 在TextInput中的文本改变时, 将新的文本赋值给Tree当前节点的标签, 也就是改变当前Tree节点的标签值. 值得注意的是赋值并不是直接给Tree中或者节点中的某个属性, 而是通过修改数据源Xml的值来改变的.
3. DataGrid的使用显示了如何在DataGrid中展示Xml的技巧.
4. 最后一个Label只是简单的显示当前节点的标签值, 与TextInput的文本保持同步