云自无心水自闲

天平山上白云泉,云自无心水自闲。何必奔冲山下去,更添波浪向人间!
posts - 288, comments - 524, trackbacks - 0, articles - 6
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

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




只有注册用户登录后才能发表评论。


网站导航: