- <?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>
Flex Tree 组件数据源 图表等 修改
最新推荐文章于 2023-11-10 09:20:32 发布