flex 封装mx:list 成两列显示组件

1.测试结果的样式

2.自定义组件代码

/FlexAppToJava/flex_src/listPackage/TwoRowList.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" 
> 
<s:layout> 
<s:BasicLayout/> 
</s:layout> 
<fx:Script> 
<![CDATA[ 
import mx.collections.ArrayCollection; 
import mx.events.FlexEvent; 

[Bindable]public var arrayData:ArrayCollection; 
[Bindable]public var textField1:String="text1"; 
[Bindable]public var textField2:String="text2"; 


]]> 
</fx:Script> 
<fx:Declarations> 
<!-- 将非可视元素（例如服务、值对象）放在此处 --> 
</fx:Declarations> 

<mx:List id="myList" dataProvider="{arrayData}" > 
<mx:itemRenderer > 
<fx:Component> 
<mx:HBox > 
<mx:Text id="text1" text="{data[outerDocument.textField1]}"/> 
<mx:Text id="text2" text="{data[outerDocument.textField2]}"/> 
</mx:HBox> 
</fx:Component> 
</mx:itemRenderer> 
</mx:List> 

</s:Group> 

4.使用方法

    a.添加引用 xmlns:mylist="listPackage.*"

    b.使用标签 <mylist:TwoRowList id="mylist" arrayData="{arry}" textField1="image" textField2="fileName"/>

    c. arrayData list数据源  textField1 第一列字段名   textField2第二列字段名

5.测试类

<?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" 
xmlns:message="messageGroup.*" 
xmlns:mylist="listPackage.*" 
creationComplete="application1_creationCompleteHandler(event)" 
minWidth="955" minHeight="600"> 
<s:layout> 
<s:BasicLayout/> 
</s:layout> 

<fx:Script> 
<![CDATA[ 
import mx.collections.ArrayCollection; 
import mx.events.FlexEvent; 

[Bindable]public var arry:ArrayCollection=new ArrayCollection(); 

protected function application1_creationCompleteHandler(event:FlexEvent):void 
{ 
for (var i:int=0;i<10;i++){ 
var obj:Object=new Object(); 
obj.image="modules"; 
obj.fileName="FlashPlay"; 
obj.fileUrl="file/download/flashplayer_12_ax_debug.exe"; 
obj.fileScript="flash播放器插件,可以播放Adobe Flash制作的flash文件,运行时，它可以跨浏览器和操作系统、原汁原味地呈现具有表现力的应用程序、内容和视频，功能强大，兼容性高。"; 

arry.addItem(obj); 
} 

} 

]]> 
</fx:Script> 

<fx:Declarations> 
<!-- 将非可视元素（例如服务、值对象）放在此处 
endpoint="http://sfvds.jsp.fjjsp01.com/messagebroker/amf"--> 

</fx:Declarations> 
<s:VGroup> 
<!-- 
<message:MessageGroupPackage/> 
---> 
<mylist:TwoRowList id="mylist" arrayData="{arry}" textField1="image" textField2="fileName"/> 
</s:VGroup> 


</s:Application>