在flex中Tree组件的使用。使用XML作为Tree组件的数据源。 更换Tree组件默认、打开、关闭、有子项等几个状态下的ico图标。<?xml version="1.0" encoding="utf-8"?> <!-- Tree control example. --> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> <!--下面是样式--> <mx:Style > Tree { verticalScrollBarStyleName: treeVerticalScrollBar; selectionColor: #417597; /*为默认、打开、关闭、有子项等几个状态添加不同的ico*/ defaultLeafIcon: Embed(source="longstep/icon/sharp_grey/gif/base.gif"); folderOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/vote_yes.gif"); folderClosedIcon: Embed(source="longstep/icon/sharp_grey/gif/options.gif"); disclosureOpenIcon: Embed(source="longstep/icon/sharp_grey/gif/pause.gif"); } .treeVerticalScrollBar { borderColor: #f00; } </mx:Style> <mx:Script> <![CDATA[ //绑定数据，定义xml类型变量用于存放选中节点 [Bindable] public var selectedNode:XML; //当tree发生change事件时的事件 public function treeChanged(event:Event):void { //将选中的节点转换成xml，赋予selectedNode，as为转换类型 selectedNode=Tree(event.target).selectedItem as XML; } //tree有3个事件使用较多，change、itemClick、itemOpen、itemClose //change:选中列改变时被触发 //itemClick:点击某一列时触发 //itemOpen:节点展开时触发 //itemClose:节点关闭时触发 ]]> </mx:Script> <!--XMLList作为数据源是最适合于tree组件的--> <mx:XMLList id="treeData"> <node label="Mail Box"> <node label="Inbox"> <node label="Marketing"/> <node label="Product Management"/> <node label="Personal"/> </node> <node label="Outbox"> <node label="Professional"/> <node label="Personal"/> </node> <node label="Spam"/> <node label="Sent"/> </node> </mx:XMLList> <mx:Panel title="Tree Control Example" height="75%" width="75%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Label width="100%" color="blue" text="Select a node in the Tree control."/> <mx:HDividedBox width="100%" height="100%"> <!--@表示xml中间点的属性，如：@label表示label属性的值--> <!--dataProvider="{treeData}"表示绑定数据，数据源可以是XML也可以是XMLList--> <mx:Tree id="myTree" width="50%" height="100%" labelField="@label" showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/> <mx:TextArea height="100%" width="50%" text="Selected Item: {selectedNode.@label}"/> </mx:HDividedBox> </mx:Panel> </mx:Application> |
