flex4 List 渲染

http://blog.csdn.net/sevennhe/article/details/6123361

代码算是基本完成了，但是想想...，如果其它页面也有需要列出类似这种List，是不是需要复制上面的自定义的渲染器那段代码。所以，应该考虑代码重用的问题，把自定义的渲染器做成一个自定义的组件，新建一个基于 spark.components.supportClasses.ItemRenderer 的mxml组件文件ListItemRenderer.mxml，把代码：

view plain

1. <s:layout>??????????<s:VerticalLayout?horizontalAlign="center"???
2. ??????????????????????????verticalAlign="middle"/>??</s:layout>??
3. <s:Label?text="{data.name}"?maxWidth="100"/>??<mx:Image?source="{data.image}"?width="100"?height="100"/>??

从List.mxml文件里面剪切到新建的ListItemRenderer.mxml文件，

view plain

1. <?xml?version="1.0"?encoding="utf-8"?>??<s:ItemRenderer?xmlns:fx="http://ns.adobe.com/mxml/2009"???
2. ????????????????xmlns:s="library://ns.adobe.com/flex/spark"???????????????????xmlns:mx="library://ns.adobe.com/flex/mx">??
3. ????<fx:Declarations>??????????<!--?将非可视元素（例如服务、值对象）放在此处?-->??
4. ????</fx:Declarations>??????<s:layout>??
5. ????????<s:VerticalLayout?horizontalAlign="center"?????????????????????????????verticalAlign="middle"/>??
6. ????</s:layout>??????<s:Label?text="{data.name}"?maxWidth="100"/>??
7. ????<mx:Image?source="{data.image}"?width="100"?height="100"/>??</s:ItemRenderer>??

修改List.mxml文件里的List控件代码如下：

view plain

1. <s:List?dataProvider="{datas}"??????????height="400"??
2. ????????itemRenderer="components.ListItemRenderer">??????<s:layout>??
3. ????????<s:VerticalLayout?paddingBottom="10"?????????????????????????????paddingLeft="10"???
4. ??????????????????????????paddingRight="10"????????????????????????????paddingTop="10"/>??
5. ????</s:layout>??</s:List>??

设置List 的属性 itemRenderer 等于自定义的渲染器，执行List.mxml文件，显示结果和之前的一样。 = =!

?