封装自己的Flex工具_List渲染器
Flex中的List组件默认显示的样式很普通,如果想自定义一些很酷的显示样式,就需要为List组件的itemRenderer设置渲染器类喽!
不过在Flex中渲染器是很简单的了,而且效果很明显!
下面就定义一个渲染器,让List组件的每行数据按块来显示!
1.定义一个List组件,并设置itemRenderer属性!
<mx:List id="list"
width="100%" height="90%"
dataProvider="{arr}"
itemRenderer="myRenderer.CustomerRespRenderer"
>
</mx:List>
<mx:Array id="arr">
<mx:Object resp_name="周一" resp_comp="ora" resp_tel="123" resp_email="a.b@cn" busy_name="的一" busy_tel="456" busy_email="c.d@cn" tech_name="东一" tech_tel="789" tech_email="e.f@cd"/>
</mx:Array>
2.在Flex工程中创建myRenderer目录,在此目录下新建一个MXML component,命名为:CustomerRespRenderer,code如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script source="script/CustomerRespRenderer.as" />
<mx:VBox width="33%" height="100%" backgroundColor="#F9D0D0">
<mx:Label text="姓名:{item.resp_name}" id="resp_name"/>
<mx:Label text="公司:{item.resp_comp}"/>
<mx:Label text="电话:{item.resp_tel}"/>
<mx:Label text="邮箱:{item.resp_email}"/>
</mx:VBox>
<mx:VBox width="33%" height="100%" backgroundColor="#C6F5BB">
<mx:Label text="姓名:{item.busy_name}"/>
<mx:Label text="电话:{item.busy_tel}"/>
<mx:Label text="邮箱:{item.busy_email}"/>
</mx:VBox>
<mx:VBox height="100%" width="34%" backgroundColor="#ABCDEF">
<mx:Label text="姓名:{item.tech_name}"/>
<mx:Label text="电话:{item.tech_tel}"/>
<mx:Label text="邮箱:{item.tech_email}"/>
</mx:VBox>
</mx:HBox>
说明一下:此类会将List组件中的一行重新进行规划,分成三段,背景颜色分别为红,绿,蓝...
3.在myRenderer目录下建立script目录,用于存放CustomerRespRenderer用到的code(这样为了使样式与code分离..好处多多)
在script目录下建立ActionScript file,命名为:CustomerRespRenderer.as,code如下:
/**
* CustomerRespRenderer类附件code
* 覆盖 data的setter
* 实现item的绑定能力
* */
import mx.utils.ObjectProxy;
[Bindable]private var item:Object;
override public function set data(value:Object):void{
item = new ObjectProxy(value);
//还得继续传递value,否则List会工作异常
super.data = value;
}
说明:此文件中蓝色加粗的那句很关键,如果不覆盖 data的话,flashplayer debug版会不断的发警告;
如此就可以完全的控制List组件的显示外观了!
