Posted on 2007-04-15 20:50
云自無心水自閑 閱讀(6117)
評論(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的文本保持同步