使用DataGrid中擴展ItemRenderer和HeaderRenderer進行操作
2024-07-10 12:39:13
供稿：網友
如果僅僅只是簡單的顯示數據，或者對顯示數據做一些格式化操作，基本的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"/>
