转载使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作

（1）有关ItemRenderer的类实现IDataRenderer和IDropInListItemRenderer接口。

<script type="text/javascript"><!-- document.body.oncopy = function() { if (window.clipboardData) { setTimeout(function() { var text = clipboardData.getData("text"); if (text && text.length > 300) { text = text + "\r\n\n本文来自CSDN博客，转载请标明出处：" + location.href; clipboardData.setData("text", text); } }, 100); } } // --></script>

很多flex control类都默认实现了IDataRenderer接口，比如Button、Container、TextArea等等。很多flex control类也实现了IDropInListItemRenderer接口，但可惜Container没有默认实现。而我做的东西，需要绘图，所以直 接利用Canvas扩展，就必须自己实现IDropInListItemRenderer接口，来获取ListData对象。

   1. private var _listData:BaseListData;  
   2.   
   3. // Make the listData property bindable.  
   4. [Bindable("dataChange")]  
   5.   
   6. public function get listData():BaseListData  
   7. {  
   8.   return _listData;  
   9. }  
  10.   
  11. public function set listData(value:BaseListData):void  
  12. {  
  13.   _listData = value;  
  14. }  

 

 

<script type="text/javascript"><!-- function StorePage() { d = document; t = d.selection ? (d.selection.type != 'None' ? d.selection.createRange().text : '') : (d.getSelection ? d.getSelection() : ''); void (keyit = window.open('http://www.365key.com/storeit.aspx?t=' + escape(d.title) + '&u=' + escape(d.location.href) + '&c=' + escape(t), 'keyit', 'scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes')); keyit.focus(); } // --></script> 再比如自己控制显示复杂视图，比如Gantt图之类。这就 必须扩展ItemRenderer和HeaderRenderer。

    private var _listData:BaseListData;
    
    // Make the listData property bindable.
    [Bindable("dataChange")]
    
    public function get listData():BaseListData
    {
      return _listData;
    }
    
    public function set listData(value:BaseListData):void
    {
      _listData = value;
    }

可惜俺刚开始不知道之个，所以耗费了很长时间，花费在寻找如何获取当前Column index问题上。

这样，我才可以在setData方法中，获取到DataGridColumn对象，如下（我使用的是AdvancedDataGrid对象）：

var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;  
//listData就是实现IDropInListItemRenderer接口所可以获取的  
var gdgc:GanttAdvancedDataGridColumn =   
      dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;  

 

var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid;
//listData就是实现IDropInListItemRenderer接口所可以获取的
var gdgc:GanttAdvancedDataGridColumn = 
      dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn;

（2）扩展DataGridColumn对象来增加属性，传递参数。

有些属性我需要动态从外面传递进来，但有不属于list data数据的部分。而Grid Header需要利用这些数据做一些渲染操作。这时候就需要扩展实现DataGridColumn对象，同时在HeaderRenderer对象中获取此 DataGridColumn对象来获取参数。

如下是扩展的一个AdvanceDataGridColumn使用，在这个扩展中，增加了startDate和lastDate两个属性

< gantt:GanttAdvancedDataGridColumn   id = "ganttColumn"   headerText = "Gantt"   itemRenderer = "{ganttItemEditor}"   headerRenderer = "{ganttHeaderEditor}"   minWidth = "400" />   

<gantt:GanttAdvancedDataGridColumn
id="ganttColumn" headerText="Gantt" itemRenderer="{ganttItemEditor}"
headerRenderer="{ganttHeaderEditor}" minWidth="400"/>

这样，就可以在application初始化的时候，在外部对此Column进行设置：

ganttColumn.startDate =  new  Date(startTime);  
ganttColumn.lastDate = new  Date(lastTime);  

ganttColumn.startDate = new Date(startTime);
ganttColumn.lastDate = new Date(lastTime);

在HeaderRenderer中，在setData方法中，可以获取相应的对象和参数

override   public  function  set  data(value:Object): void {  
    super.data = value;  
    var advancedDataGridColumn:GanttAdvancedDataGridColumn   
                      = value as  GanttAdvancedDataGridColumn;  
    if (advancedDataGridColumn!= null ){  
    if (advancedDataGridColumn.startDate!= null ){  
        startDate = advancedDataGridColumn.startDate;  
        lastDate = advancedDataGridColumn.lastDate;  
        render();  
    }  
    }  
}             

override public function set data(value:Object):void{
    super.data = value;
    var advancedDataGridColumn:GanttAdvancedDataGridColumn 
                      = value as GanttAdvancedDataGridColumn;
    if(advancedDataGridColumn!=null){
	if(advancedDataGridColumn.startDate!=null){
		startDate = advancedDataGridColumn.startDate;
		lastDate = advancedDataGridColumn.lastDate;
		render();
	}
    }
}			

（3）利用labelFunction进行显示数据格式化

比如我想对日期数据进行格式化操作，如下所示：

private  function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {      
    var dateFormatter:DateFormatter = new  DateFormatter();  
    dateFormatter.formatString = "YYYY-MM-DD HH:NN" ;  
    var td:Date = new  Date(  new  Number(item[column.dataField]) );  
    return  dateFormatter.format( td );  
}  

private function date_labelFunc(item:Object, column:AdvancedDataGridColumn):String {	
    var dateFormatter:DateFormatter = new DateFormatter();
    dateFormatter.formatString = "YYYY-MM-DD HH:NN";
    var td:Date = new Date( new Number(item[column.dataField]) );
    return dateFormatter.format( td );
}

在mx的datagridcolumn中，就可以引用这个label function

< mx:AdvancedDataGridColumn   headerText = "startTime"   dataField = "startTime"   labelFunction = "date_labelFunc"   width = "120" />