Flex中一个动态修改Tree节点标签的例子

一个动态修改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的文本保持同步