Flex笔记_MX DataGrid、列表和树
发布时间:2020-12-15 03:39:18 所属栏目:百科 来源:网络整理
导读:ListBase 和 AdvancedListBase 所有的MX List都是从 ListBase 和 AdvancedListBase 派生出来的。 属性: columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFunction、 lockedColumnCount、lockedRowCount、rowCount、row
ListBase 和 AdvancedListBase
lockedColumnCount、lockedRowCount、rowCount、rowHeight、selectable、selectedIndex、 selectedIndices、selectedItem、selectedItems、variableRowHeight、wordWrap
数据源,集合与 dataProvider
填充 dataProvider:
集合的类型:
集合的使用者:AdvancedDataGrid、ButtonBar、Charting components including、Legends、ColorPicker、ComboBox、Menu、MenuBar、OLAPDataGrid、PopUpMenuButton、Repeater、TabBar、DataGrid、DateField、 HorizontalList、LinkBar、List、TileList、ToggleButtonBar、Tree 集合的初始化
<s:ArrayCollection id="myAC"> <fx:Object label="item1" data="data1"/> <fx:Object label="item2" data="data2"/> <fx:Object label="item3" data="data3"/> </s:ArrayCollection>
<fx:Script> <![CDATA[ import mx.collections.ArrayCollection; public var myAc:ArrayCollection = new ArrayCollection([ { label:"item1",data:"data1"},{ label:"item2",data:"data2"},{ label:"item3",data:"data3"} ]); ]]> </fx:Script> 集合的填充
List组件:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <mx:List id="myFriends" x="10" y="10"> <fx:String>friend 1</fx:String> <fx:String>friend 2</fx:String> <fx:String>friend 3</fx:String> </mx:List> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <s:ArrayCollection id="myAC"> <fx:Object label="friend 1"/> <fx:Object label="friend 2"/> <fx:Object label="friend 3"/> </s:ArrayCollection> </fx:Declarations> <mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}"> </mx:List> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {label:"friend 1"},{label:"friend 2"},{label:"friend 3"} ]); ]]> </fx:Script> <mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}"> </mx:List> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {name:"friend 1"},{name:"friend 2"},{name:"friend 3"} ]); ]]> </fx:Script> <mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"> </mx:List> </s:Application> HorizontalList组件
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {name:"friend 1"},{name:"friend 3"} ]); ]]> </fx:Script> <mx:HorizontalList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"/> </s:Application> TileList组件
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {name:"friend 1"},{name:"friend 3"},{name:"friend 4"},{name:"friend 5"},{name:"friend 6"},{name:"friend 7"},{name:"friend 8"} ]); ]]> </fx:Script> <mx:TileList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name" direction="vertical"/> </s:Application>
direction="vertical" columnWidth="150" rowHeight="100"/> ?
DataGrid 组件
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <mx:DataGrid id="dg" width="500" height="200"> <mx:dataProvider> <fx:Object name="item1" email="item1@email.com"/> <fx:Object name="item2" email="item2@email.com"/> <fx:Object name="item3" email="item3@email.com"/> </mx:dataProvider> </mx:DataGrid> </s:Application> <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {name:"item1",email:"item1@email.com",url:"www.url1.com"},{name:"item2",email:"item2@email.com",url:"www.url2.com"},{name:"item3",email:"item3@email.com",url:"www.url3.com"},]); ]]> </fx:Script> <mx:DataGrid id="dg" width="500" height="150" dataProvider="{myAC}"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Contact Name" width="300" /> <mx:DataGridColumn dataField="email" headerText="E-Mail" width="200" /> <mx:DataGridColumn dataField="url" headerText="Web Site" width="200" /> </mx:columns> </mx:DataGrid> </s:Application>
sortable、sortCompareFunction、sortDescending(true:降序,false:升序)、 visible、width、wordWrap(启用需确保DataGrid组件的 variableRowHeight属性被设置为true) Tree组件
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <fx:XMLList id="myXML"> <friends> <friend name="Item1"/> <friend name="Item2"/> <friend name="Item2"/> </friends> </fx:XMLList> </fx:Declarations> </s:Application> <mx:XMLList source="my.xml" id="myXML"/>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <mx:XMLListCollection id="myXMLCollection"> <fx:XMLList id="myXML" xmlns=""> <friends label="Friends"> <friend label="Friend"/> </friends> <families label="Families"> <family label="Family"/> </families> </fx:XMLList> </mx:XMLListCollection> </fx:Declarations> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <mx:XMLListCollection id="myXMLCollection"> <fx:XMLList id="myXML" xmlns=""> <friends label="Friends"> <friend label="Friend1"/> <friend label="Friend2"/> <friend label="Friend3"/> </friends> <families label="Families"> <family label="Family1"/> <family label="Family2"/> </families> </fx:XMLList> </mx:XMLListCollection> </fx:Declarations> <mx:Tree dataProvider="{myXMLCollection}" labelField="@label" width="300" height="200"/> </s:Application> 与基于List的MX组件交互
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; import mx.events.ListEvent; import mx.controls.Alert; [Bindable] public var myAC:ArrayCollection = new ArrayCollection([ {name:"item1",email:"item1@email.com"},email:"item2@email.com"} ]); public function contactDataGrid_clickHandler(event:ListEvent):void { Alert.show("You have clicked on row " + event.rowIndex + " and col " + event.columnIndex + "." + "Witch is for " + event.currentTarget.selectedItem.name); } ]]> </fx:Script> <mx:DataGrid id="contactDataGrid" width="500" height="150" dataProvider="{myAC}" itemClick="contactDataGrid_clickHandler( event )"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Contact Name" width="300"/> <mx:DataGridColumn dataField="email" headerText="E-mail" width="200"/> </mx:columns> </mx:DataGrid> </s:Application>
... public function contactDataGrid_clickHandler():void { Alert.show("Name : " + contactDataGrid.selectedItem.name); }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |