Flex笔记_MX DataGrid、列表和树

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="data1"/>
<fx:Object label="item2" data="data2"/>
<fx:Object label="item3" data="data3"/>
</s:ArrayCollection>
  • 使用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>  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nummy

reStructuredtext快速入门

reStructuredText是一种reStructuredText是一种轻量级的文本标记语言,简单易读,所见即所得的文本标记语言。

8520
来自专栏技术小讲堂

ASP.NET AJAX(13)__利用Microsoft AJAX Library开发客户端组件Sys.Component成员Sys.IDisposable成员Sys.INotifyDisposin

Microsoft AJAX Library定义了一个客户端组件的模型,它的基类是Sys.Component,它实现了三个接口Sys.IDisposable,S...

34350
来自专栏谈补锅

开发中常用的JS知识点集锦

9620
来自专栏mySoul

jQuery(一)

jquery为一种库,属于最基础的一个库,伴随着h5的到来,很多jquery的规则直接融入到了规则本身了,直接使用原生的js也能达到相同的目的。虽然如此,不过依...

27440
来自专栏瓜大三哥

matlab GUI基础1

GUI编程开发 1.句柄图形 是一种面向对象的绘图系统。这些细节一般隐藏在图形M文件的内部,用户通过句柄图形可以定制图形的许多特性,这是使用高级绘图函数无法实现...

30380
来自专栏python学习路

五、XML与xpath--------------爬取美女图片 先用一个小实例开头吧(爬取贴吧每个帖子的图片)XML 和 HTML 的区别XML文档示例

除了正则表达式处理HTML文档,我们还可以用XPath,先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 ----  先...

38240
来自专栏BestSDK

“Excel格式”最风骚玩法,炫技加薪就靠它了

话不多说直接上干货! 001 自定义格式概述 01 调出单元格格式对话框 选中需要设置格式的单元格,按「CTRL+1」快捷键打开「设置单元格格式」对话框。 在对...

37630
来自专栏腾讯社交用户体验设计

面向未来的 CSS Variable

9220
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

19930
来自专栏liulun

自己动手写UI库——引入ExtJs(布局)

第一:来看一下最终的效果 ? 第二:来看一下使用方法: ? 第三: Component类代码如下所示: public class Compo...

21550

扫码关注云+社区

领取腾讯云代金券