Flex Tree组件Demo

这个DEMO可以创建一个全新的树型结构，让我感到奇怪的是，虽然我用XML而不是XMLListCollection/ArrayCollection作为Tree的数据源，但对XML的更新依然会在Tree中反映出来——这似乎和Flex的文档有冲突，下面是引用Flex文档的一段内容：

• Raw objects are often not sufficient if you have data that changes, because the data provider component does not receive a notification of any changes to the base object. The component therefore does not get updated until it must be redrawn due to other changes in the application, or if the data provider is reassigned. At that time, it gets the data again from the updated raw object.

Here is the demo(怎么插入swf文件？用embed标签？)

Source code here:

<?xml version="1.0"?> <!-- dpcontrols/TreeSimple.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.collections.XMLListCollection; [Bindable] private var list:XML = <list/>; public function onBtnAddNodeClick(e:Event):void { var newNodeName:String = nodeName.text; if(newNodeName.length == 0) return; var currentNode:XML = XML(tree.selectedItem); if(currentNode == null || currentNode.@type!=1) return; var newNode:XML = <node/>; newNode.@label = newNodeName; newNode.@type= 1; newNode.@isBranch = true; currentNode.appendChild(newNode); } public function onBtnAddTopNodeClick(e:Event):void { var newNodeName:String = nodeName.text; if(newNodeName.length == 0) return; var newNode:XML = <node/>; newNode.@label = newNodeName; newNode.@type= 1; newNode.@isBranch = true; list.appendChild(newNode); } public function onBtnDelNodeClick(e:Event):void { var currentNode:XML = XML(tree.selectedItem); if(currentNode == null) return; var sibling:XMLList = currentNode.parent().children(); for(var i:Number = 0; i < sibling.length(); ++ i){ if(sibling[i].@label == currentNode.@label){ delete sibling[i]; } } } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Label text="结点名称："/> <mx:TextInput id="nodeName" width="100%"/> <mx:Spacer width="100%"/> <mx:Button id="btnAddNode" label="添加子结点" click="onBtnAddNodeClick(event)"/> <mx:Button id="btnAddTopNode" label="添加顶级结点" click="onBtnAddTopNodeClick(event)"/> <mx:Button id="btnDelNode" label="删除结点" click="onBtnDelNodeClick(event)"/> </mx:ApplicationControlBar> <mx:Panel title="Tree测试" width="80%" height="80%" paddingTop="20" horizontalAlign="center"> <mx:Tree id="tree" dataProvider="{list.node}" labelField="@label" showRoot="true" width="80%" height="80%" /> </mx:Panel> </mx:Application>