ListBase 和 AdvancedListBase

所有的MX List都是从 ListBase 和 AdvancedListBase 派生出来的。
属性：

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFunction、
lockedColumnCount、lockedRowCount、rowCount、rowHeight、selectable、selectedIndex、
selectedIndices、selectedItem、selectedItems、variableRowHeight、wordWrap

事件：

change、dataChange、itemClick、itemDoubleClick、itemRollOut、itemRollOver

数据源，集合与 dataProvider

dataProvider 封装了一个在提供的数据集合上运行的for循环，按照顺序将集合中的一个对象分配给下一个项渲染器。
这种组件也被称为数据驱动控件。

填充 dataProvider:

可能是低级的对象，如Array、Boolean或String；
但扩展了ListCollectionView的数据类型（如ArrayCollection）填充dataProvider更合适。
集合可以被看做是内置了排序及过滤功能的高级数组。此外，集合还为使用dataProvider的对象提供了通用的即插即用接口。
集合能在其数据发生变化时，触发dataChange事件，绑定到该集合的任何组件都会自动监听这个事件，据此更新自己的视觉状态。
dataChange事件是一个可绑定的事件，其它组件可以进行监听，并在事件被分发时执行某种处理或操作。
集合在其状态发生变化时，会自动使用它的组件发送通知，以便这些组件刷新显示的数据。为此，集合会以广播的形式发布表示变化的事件。

集合的类型：

ArrayCollection：基于Array构建的一种主要的集合类型；
XMLListCollection：在封装XML及XMLList对象的基础上添加了标准的集合功能；
GroupCollection：用于AdvanceDataGrid，分组数据。

集合的使用者：

AdvancedDataGrid、ButtonBar、Charting components including、Legends、ColorPicker、ComboBox、
Menu、MenuBar、OLAPDataGrid、PopUpMenuButton、Repeater、TabBar、DataGrid、DateField、
HorizontalList、LinkBar、List、TileList、ToggleButtonBar、Tree

集合的初始化

使用关联标签的MXML方法：

<s:ArrayCollection id="myAC">
<fx:Object label="item1" data=http://www.mamicode.com/"data1"/>> 
 
  使用ActonScript初始化：  
 
<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的控件。  
  简单的讲，可以通过HTTP连接获取XML数据、或者通过调用WebService（ColdFusion、LCDS、AMFPHP）函数，使用RemoteObject（Flex的二进制数据传输机制）加载数据。  
  在数据返回后，需要将其转换成基于List的组件可以被监听的集合。  
 

 

 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> 
 
  ActionScript方式  
 
<?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> 
 
  labelField属性指定要显示的数据列  
 
<?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 2"},
{name:"friend 3"}
]);
]]>
</fx:Script>

<mx:HorizontalList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"/>
</s:Application> 

 TileList组件  
 
  创建大小相同的拼贴快（tile）。  
  分方向：水平方向、垂直方向。各方向上内容超过视图显示范围的会显示相应方向上的滚动条，具体要看direction属性是怎么设置的。  
  columnCount 和 rowCount属性可以控制每个视图显示的行数或列数。  
 
<?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"},
{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> 
 
  columnWidth 和 rowHeight 属性可以控制tile块的大小，避免显示不全  
 <mx:TileList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name" 

 direction="vertical" columnWidth="150" rowHeight="100"/> 

   

 
 
  TileList组件和Tile组件很像，但存在性能差异：前者会动态渲染进入的数据项，可以减少渲染占用的内存；后者的子对象会一次性全部被渲染，占用CPU较高。  
 

 

 DataGrid 组件  
 
  附加属性：resizeableColumns（默认为true），sortableColumns（默认为true）  
  调用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> 
 
  sortableColumns属性控制整个DataGrid组件能否进行排序；  
  sortable属性控制 DataGridColumn 能否进行排序。  
  DataGridColumn支持的所有属性：  
 dataField、headerText、headerWordWrap、labelFunction、minWidth、resizeable、 

 sortable、sortCompareFunction、sortDescending（true：降序，false：升序）、 

 visible、width、wordWrap（启用需确保DataGrid组件的 variableRowHeight属性被设置为true） 

 

 

 Tree组件  
 
  List组件的后代。  
  使用层次化数据：XML是一种按照嵌套结构组织数据的结构；Flex3中，XML和XMLList对象多少有一点冗余，所以Flex4中删除了XML对象，取而代之的是使用XMLList和XMLListCollection对象。  
  XMLList只能在<fx:Declarations/>标签中声明；通过source属性，也能从一个单独的文件中导入。  
 
<?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"/> 

 
 
  XMLListCollection 负责包装 XMLList 对象，并添加 ICollection 实现的功能。  
  在数据可能发生变化的情况下，应该使用集合，这样就可以在发生变化时通知那些使用了dataProvider属性绑定了该数据的组件更新其视图。  
 
<?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> 
 
  调用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>
<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组件交互  
 
  列表事件：  
 click、doubleClick、itemClick、change 

 
 
  向函数传递事件：  
 
<?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"},
{name:"item2",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> 

 
 
  向函数传递数据：  
 itemClick="contactDataGrid_clickHandler( event.currentTarget.selectedItem )" 

 
 
  直接访问被选定的行：  
 itemClick="contactDataGrid_clickHandler() 

 ... 

 public function contactDataGrid_clickHandler():void { 

 Alert.show("Name : " + contactDataGrid.selectedItem.name); 

 } 

 

 
 
  绑定到被选定的行（或者说直接显示）  
 <?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.ListEvent; 

 [Bindable] 

 public var myAC:ArrayCollection = new ArrayCollection([ 

 {name:"item1",email:"item1@email.com"}, 

 {name:"item2",email:"item2@email.com"} 

 ]); 

 ]]> 

 </fx:Script> 

 <s:VGroup> 

 <mx:DataGrid id="contactDataGrid" 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:columns> 

 </mx:DataGrid> 

 <s:Label text="{contactDataGrid.selectedItem.name}"/> 

 </s:VGroup> 

 </s:Application> 

 

 

 

 

 

 

 

 

Flex笔记_MX DataGrid、列表和树

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Flex笔记_MX DataGrid、列表和树

Flex笔记_MX DataGrid、列表和树

ListBase 和 AdvancedListBase

数据源，集合与 dataProvider

填充 dataProvider:

集合的类型：

集合的使用者：

集合的初始化

集合的填充

List组件：

HorizontalList组件

TileList组件

DataGrid 组件

Tree组件

与基于List的MX组件交互

看完仍有疑问？有类似问题直接问程序猿