DataGrid实现自定义ItemRenderer

今天要实现一个自定义的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>