如果僅僅只是簡單的顯示數據，或者對顯示數據做一些格式化操作，基本的DataGrid，加labelFunction支持就可以滿足了，但大多我們需要針對不同的數據和對象，進行不同的渲染，比如checkbox啦，下拉選擇框，日期等等，再比如自己控制顯示復雜視圖，比如Gantt圖之類。這就必須擴展ItemRenderer和HeaderRenderer。
（1）有關ItemRenderer的類實現IDataRenderer和IDropInListItemRenderer接口。
很多flex control類都默認實現了IDataRenderer接口，比如Button、Container、TextArea等等。很多flex control類也實現了IDropInListItemRenderer接口，但可惜Container沒有默認實現。而我做的東西，需要繪圖，所以直接利用Canvas擴展，就必須自己實現IDropInListItemRenderer接口，來獲取ListData對象。
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;
}
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"/>
<mx:AdvancedDataGridColumn headerText="startTime" dataField="startTime" labelFunction="date_labelFunc" width="120"/>
