今天要实现一个自定义的ItemRender,需要根据不同的数据项配以不同的图标,如下图所示:
从网上学习了一下,如果要实现自定义的ItemRender,则需要实现IDataRenderer接口,通过此接口,既可以进行很方便的自定义Render(可参照http://xinsync.xju.edu.cn/index.php/archives/5704),
之后通过实现该接口的set data方法,即可实现数据绑定。
override public function set data(value:Object):void
{
super.data = value;
}
注意同时应该,覆写get data方法,即使不用到:
override public function get data():Object
{
return null;
}
但是,有问题的情况是,IDataRenderer接口的set data方法中,并不能动态获得DataGrid具体的columnIndex,这就造成了针对上面三列,需要进行硬编码,即定义出三套完全一样的实现了IDataRenderer接口的类,只不过是为了在set data方法中取得value的不同值。太愚公移山了吧?!
能否让自定义的这个Render具备动态获得DataGrid具体的columnIndex值呢?
查了一下API,发现了DataGridItemRenderer除了继承刚才提到的IDataRenderer接口外,还继承了IDropInListItemRenderer接口!继续探查发现,IDropInListItemRenderer接口中,通过listData属性,即可获得DataGrid对象,columnIndex自然不在话下了!
恩,这就动手实现吧!
上图中实现的自定义ItemRenderer,需要一个父容器来排版,用HBox好了,下面是完整代码:
//自定义Render类
package sim.monitor.asobj
{
import mx.containers.HBox;
import mx.controls.Image;
import mx.controls.Label;
import mx.core.IDataRenderer;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.IDropInListItemRenderer;
public class AbfltItemRenderer extends HBox implements IDataRenderer,IDropInListItemRenderer
{
private var image:Image=new Image(); //小图标
private var content:Label=new Label();
private var _listData:DataGridListData;
//IDropInListItemRenderer接口方法
[Bindable("dataChange")]
public function get listData():BaseListData
{
return _listData;
}
//IDropInListItemRenderer接口方法
public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}
public function AbfltItemRenderer()
{
super();
this.percentWidth=100;
this.percentHeight=100;
this.image.width=14;
this.image.height=14;
this.image.setStyle("horizontalAlign","right");
this.addChild(image);
this.content.percentWidth=80;
this.content.setStyle("textAlign","center")
this.addChild(content);
this.setStyle("horizontalGap",2); //水平间隔
this.setStyle("horizontalAlign","center"); //水平对齐方式
this.setStyle("verticalAlign","middle"); //垂直对齐方式
}
//IDataRenderer接口方法
override public function get data():Object
{
return null;
}
//IDataRenderer接口方法
override public function set data(value:Object):void
{
super.data = value;
var dgListData:DataGridListData = listData as DataGridListData;
if(dgListData.columnIndex==0){ //第一列
image.source="Images/logo1.gif";
content.text=value.col1
}
if(dgListData.columnIndex==1){ //第二列
image.source="Images/logo2.gif";
content.text=value.col2
}
if(dgListData.columnIndex==2){ //第三列
image.source="Images/logo3.gif";
content.text=value.col3
}
}
}
}
//测试用的Application代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!--脚本-->
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
//private var allData:ArrayCollection= new ArrayCollection(); //未分页的所有记录集
private var allData:ArrayCollection= new ArrayCollection([
{col1:"HU7181",col2:"17:55",col3:"20:00"},
{col1:"HU7281",col2:"14:55",col3:"15:00"},
{col1:"HU7071",col2:"07:55",col3:"10:10"},
{col1:"HU8888",col2:"09:55",col3:"11:00"},
{col1:"HU3478",col2:"07:55",col3:"10:10"},
{col1:"HU2221",col2:"14:55",col3:"15:00"},
{col1:"HU1111",col2:"07:55",col3:"10:10"}]);
[Bindable]
private var fltdata:ArrayCollection = new ArrayCollection(); //当前显示的记录集合
private static const DEFAULT_PAGE_SIZE:Number = 4; //默认的每页记录数
private static const DEFAULT_PAGE_OFFSIDE=1; //记录的偏移量 即翻页显示的新数据
private static const DEFAULT_DATAGRID_HEIGHT:Number = DEFAULT_PAGE_SIZE*30; //默认的DataGrid高度
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%">
<mx:VBox x="0" y="0" width="100%" height="100%">
<mx:HBox width="100%" height="20%" verticalAlign="bottom" horizontalAlign="center" >
<mx:Label text="航班号" height="50%" width="33%" textAlign="center"/>
<mx:Label text="起飞时间" height="50%" width="33%" textAlign="center"/>
<mx:Label text="到达时间" height="50%" width="33%" textAlign="center"/>
</mx:HBox>
<mx:HBox width="100%" height="5%" verticalAlign="bottom" horizontalAlign="center">
<mx:Image id="img_pdown" width="15" height="8" source="@Embed(source='../../../../Images/dgpageup.png')"/>
</mx:HBox>
<mx:HBox width="100%" height="70%" verticalAlign="middle">
<mx:DataGrid id="AbFlt" showHeaders="false" width="100%" height="{DEFAULT_DATAGRID_HEIGHT}" dataProvider="{allData}" rowCount="{DEFAULT_PAGE_SIZE}" verticalScrollPolicy="off">
<mx:columns>
<mx:DataGridColumn dataField="col1" itemRenderer="sim.monitor.asobj.AbfltItemRenderer"/>
<mx:DataGridColumn dataField="col2" itemRenderer="sim.monitor.asobj.AbfltItemRenderer"/>
<mx:DataGridColumn dataField="col3" itemRenderer="sim.monitor.asobj.AbfltItemRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:HBox width="100%" height="5%" verticalAlign="top" horizontalAlign="center">
<mx:Image id="img_pup" width="15" height="8" source="@Embed(source='../../../../Images/dgpagedown.png')"/>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Application>