在ArrayCollection和DataGrid代码例举下展示的Flex控件、数据结构乃至flex语言存在的衍生性和关联性

来源：互联网发布：黑马程序员修正校区编辑：程序博客网时间：2024/06/05 22:42

本文简单讲述了DataGrid等控件在利用labelField\labelFunction等属性进行功能性扩展和展示了使用Array、ArrayList、ArrayCollection等数据结构作为数据效果及及其在mxml和ActionScript中的表现形式和它们的衍生功能增强性关系，意在概要说明控件间、数据类型间乃至mxml和ActionScript间存在某种有律可寻的学习和使用方式。

诸如DataGrid、List、DropDownList、ComboBox等Flex控件在默认情况会显示数据源中的label属性值，但如果没有此属性也可通过labelField(DataGrid为dataField)来指定控件显示数据源的哪个属性值。此属性的存在使控件的可塑性大为增强，我们可以通过改变此属性值来动态修改控件显示内容，此外诸多控件都提供了labelFunction功能，可以对通过labelField既定的属性的值再次进行格式化（横向：不知是显示指定字段内容，还可以增加其他显示内容，如DataGrid中将多个字段值显示在一个字段上；纵向：对该字段值进行深度加工，达到显示效果更符合要求和习惯，例如改变某时间字段的时间格式等）。

对于不同控件labelFunction指定函数的参数不同，下面代码展示DataGrid格式化格林尼治时间。

<fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.formatters.DateFormatter;import mx.controls.Alert;private var arrayCollection = new ArrayCollection([{name:'A',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},{name:'B',date:new Date('Wed,   30   May   2007   15:19:43   GMT+8 ')},]);private function date_labelFunction(item:Object,column:DataGridColumn):String{var dateFormatter:DateFormatter = new DateFormatter();dateFormatter.formatString = "YYYY年MM月DD日 JJ:NN:SS";var dateStr:String = dateFormatter.format(item[column.dataField]);//Alert.show(dateFormatter.error);return dateStr;}]]></fx:Script><s:HGroup><s:VGroup><mx:DataGrid dataProvider="{arrayCollection}"><mx:columns><mx:DataGridColumn dataField="name" /><mx:DataGridColumn dataField="date" width="300"/></mx:columns></mx:DataGrid><mx:DataGrid dataProvider="{arrayCollection}"><mx:columns><mx:DataGridColumn dataField="name"/><mx:DataGridColumn dataField="date" width="300"  labelFunction="date_labelFunction" /></mx:columns></mx:DataGrid></s:VGroup>

效果如下图所示：

上面代码作为数据源ArrayCollection的定义也可以使用mxml标签来表达，此外还有很多这样的例子。这个事实的原理类似于jsp和java，其实jsp是对java的标签化封装，而mxml也是对actionScript的一种封装，使之更适合web开发人员使用。下面的代码是对本段描述的一种展示，同时也是“一切mxml表示的内容都可以使用actionScript来表达”的一个例证。

<fx:Declarations><s:ArrayCollection id="declarArrayCollection"><fx:Object name="E" date="Thu Jan 5 10:49:39 GMT+0800 2012"/><fx:Object name="F" date="Wed, 30 May 2007 15:19:43 GMT+8"/></s:ArrayCollection><s:ArrayList id="declarArrayList"><fx:Object name="C" age="12"/><fx:Object name="D" age="16"/></s:ArrayList><fx:Array id="declarArray"><fx:Object name="A" age="18"/><fx:Object name="B" age="19"/></fx:Array></fx:Declarations><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.containers.Form;private var array:Array = new Array([{name:"A",age:"18"},{name:"B",age:"19"},]);private var arrayList:ArrayList = new ArrayList([{name:"C",age:"12"},{name:"D",age:"16"},]);private var arrayCollection = new ArrayCollection([{name:'E',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},{name:'F',date:new Date('Wed, 30 May 2007 15:19:43 GMT+8 ')},]);</fx:Script>

Array、ArrayList、ArrayCollection这几种数据结构非常相似，而且大都可以作为同一控件的数据源，不过ArrayList出现在Flex4.0，出现原因之一是应对Spark下一些一些dataProvider类型为实现IList，如List控件等。

上述三种数据结构可以说具有衍生性，Array是基础，它作为数据源时控件不能很好的感知数据源Array的变化；而ArrayCollection则对Array扩展了很多功能，诸如检索、过滤、排序、分类、更新监控等功能；至于Flex4.中新增加的ArrayList则可将其看做轻量级的ArrayCollection，它不能像ArrayCollection进行筛选过滤数据。下面代码展示ArrayCollection利用Sort针对时间字段值进行排序过程。

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"><mx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.containers.Form; private var arrayCollection = new ArrayCollection([{name:'A',date:new Date('Wed,   30   May   2007   15:19:43   GMT+8 ')},{name:'B',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},]); import mx.formatters.DateFormatter;import mx.controls.Alert;private function date_labelFunction(item:Object,column:DataGridColumn):String{var dateFormatter:DateFormatter = new DateFormatter();dateFormatter.formatString = "YYYY-MM-DD JJ:NN:SS";var dateStr:String = dateFormatter.format(item[column.dataField]);//Alert.show(dateFormatter.error);return dateStr;}import mx.collections.SortField;import mx.collections.Sort;protected function button1_clickHandler(event:MouseEvent):void{var sort:Sort = new Sort();sort.fields = [new SortField("date",true,false,null)];arrayCollection.sort = sort;arrayCollection.refresh(); }]]></mx:Script><mx:VBox><mx:DataGrid dataProvider="{arrayCollection}"><mx:columns><mx:DataGridColumn dataField="name" /><mx:DataGridColumn dataField="date" width="300" labelFunction="date_labelFunction"/></mx:columns></mx:DataGrid><mx:Button  label="排序" click="button1_clickHandler(event)"></mx:Button></mx:VBox></mx:Application>

单击【排序】前后对比

控件间往往存在功能上的相似性，例如List和DataGrid，前者是单列数据，后者则是多列数据（我们还可以比较下DropDownList和ComboBox等）。各种数据结构间也存在关联性或衍生性，如本文所提到的Array、ArrayList和ArrayCollection。在学习和使用上注意对比区分利用其衍生和关联，选择最合适的对象完成所需功能。