课程表

Flex课程

工具箱
速查手册

Flex Tree控件

当前位置:免费教程 » 软件/图像 » Flex

介绍

树控件显示排列为可扩展树的分层数据。

类声明

以下是 mx.controls.Tree 类的声明:

  1. public class Tree
  2. extends List
  3. implements IIMESupport

公共属性

S.N.属性和描述
1

dataDescriptor:mx.controls.treeClasses:ITreeDataDescriptor

返回当前的ITreeDataDescriptor。

2

dataProvider:Object

[override]包含要显示的数据的对象。

3

dragMoveEnabled:Boolean

[override]表示可以移动项目,而不是仅仅从树控件复制,作为拖放操作的一部分。

4

firstVisibleItem : Object

当前显示在树顶行的项目。

5

hasRoot:Boolean

[只读]表示当前dataProvider有一个根项目; 例如,分层结构中的单个顶节点。

6

itemIcons:Object

指定项目图标的对象。

7

maxHorizontalScrollPosition:Number

[override] Tree控件的maxHorizontalScrollPosition属性的最大值。

8

openItems:Object

打开或设置的项目已打开。

9

showRoot:Boolean

设置根项目的可见性。

公共方法

S.N.方法和描述
1

Tree()

构造函数。

2

expandChildrenOf(item:Object,open:Boolean):void

打开或关闭指定项目下方的所有树项目。

3

expandItem(item:Object,open:Boolean,animate:Boolean = false,dispatchEvent:Boolean = false,cause:Event = null):void

打开或关闭分支项目。

4

getParentItem(item:Object):*

返回子项目的已知父项。

5

isItemOpen(item:Object):Boolean

如果指定的项目分支已打开(显示其子项),则返回true。

6

setItemIcon(item:Object,iconID:Class,iconID2:Class):void

设置项目的关联图标。

保护方法

S.N.方法和描述
1

dragCompleteHandler(event:DragEvent):void

[override]处理DragEvent.DRAG_COMPLETE事件。

2

dragDropHandler(event:DragEvent):void

[override]处理DragEvent.DRAG_DROP事件。

3

initListData(item:Object,treeListData:mx.controls.treeClasses:TreeListData):void

初始化树项目渲染器使用的TreeListData对象。

4

makeListData(data:Object,uid:String,rowNum:int):BaseListData

[override]创建一个新的TreeListData实例,并根据输入数据提供者项目填充字段。

事件

S.N.事件和描述
1

itemClose

分支关闭或折叠时分派。

2

itemOpen

分支打开或扩展时分派。

3

itemOpening

启动分支打开或关闭时分派。

继承的方法

此类继承以下类中的方法:

  • mx.controls.List

  • mx.controls.listClasess.ListBase

  • mx.core.ScrollControlBase

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex树控件示例

让我们按照以下步骤通过创建测试应用程序来检查Flex应用程序中的树控制的用法:

步骤描述
1 Flex - 创建应用程序章节中所述,在包 com.tutorialspoint.client 下创建名为 HelloWorld 的项目。
2修改 HelloWorld.mxml ,如下所述。 保持文件的其余部分不变。
3编译并运行应用程序,以确保业务逻辑按照要求工作。

以下是修改后的mxml文件 src / com.tutorialspoint / HelloWorld.mxml 的内容。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/mx"
  5. width="100%" height="100%" minWidth="500" minHeight="500"
  6. >
  7. <fx:Style source="/com/tutorialspoint/client/Style.css"/>
  8. <fx:Script>
  9. <![CDATA[
  10. [Bindable]
  11. public var selectedNode:XML;
  12.  
  13. // Event handler for the Tree control change event.
  14. public function treeChanged(event:Event):void {
  15. selectedNode=Tree(event.target).selectedItem as XML;
  16. }
  17. ]]>
  18. </fx:Script>
  19. <fx:Declarations>
  20. <fx:XMLList id="treeData">
  21. <node label="E-Mail Box">
  22. <node label="Inbox">
  23. <node label="Client"/>
  24. <node label="Product"/>
  25. <node label="Personal"/>
  26. </node>
  27. <node label="Sent Items">
  28. <node label="Professional"/>
  29. <node label="Personal"/>
  30. </node>
  31. <node label="Deleted Items"/>
  32. <node label="Spam"/>
  33. </node>
  34. </fx:XMLList>
  35. </fx:Declarations>
  36. <s:BorderContainer width="630" height="480" id="mainContainer"
  37. styleName="container">
  38. <s:VGroup width="100%" height="100%" gap="50"
  39. horizontalAlign="center" verticalAlign="middle">
  40. <s:Label id="lblHeader" text="Complex Controls Demonstration"
  41. fontSize="40" color="0x777777" styleName="heading"/>
  42. <s:Panel id="treePanel" title="Using Tree"
  43. width="500" height="300">
  44. <s:layout>
  45. <s:VerticalLayout gap="10" verticalAlign="middle"
  46. horizontalAlign="center"/>
  47. </s:layout>
  48. <mx:Tree id="tree" width="95%" height="75%"
  49. labelField="@label" showRoot="false"
  50. dataProvider="{treeData}" change="treeChanged(event)"/>
  51. <s:TextArea height="20%" width="95%"
  52. text="Selected Item: {selectedNode.@label}"/>
  53. </s:Panel>
  54. </s:VGroup>
  55. </s:BorderContainer>
  56. </s:Application>

准备好所有更改后,让我们以正常模式编译和运行应用程序,就像在 Flex - 创建应用程序中一样 章节。 如果一切顺利,您的应用程序,这将产生以下结果:[在线试用]

Flex Tree Control
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号