使用DataGrid中擴展ItemRenderer和HeaderRenderer進行操作

如果僅僅只是簡單的顯示數(shù)據(jù)，或者對顯示數(shù)據(jù)做一些格式化操作，基本的DataGrid，加labelFunction支持就可以滿足了，但大多我們需要針對不同的數(shù)據(jù)和對象，進行不同的渲染，比如checkbox啦，下拉選擇框，日期等等，再比如自己控制顯示復(fù)雜視圖，比如Gantt圖之類。這就必須擴展ItemRenderer和HeaderRenderer。
（1）有關(guān)ItemRenderer的類實現(xiàn)IDataRenderer和IDropInListItemRenderer接口。
很多flex control類都默認實現(xiàn)了IDataRenderer接口，比如Button、Container、TextArea等等。很多flex control類也實現(xiàn)了IDropInListItemRenderer接口，但可惜Container沒有默認實現(xiàn)。而我做的東西，需要繪圖，所以直接利用Canvas擴展，就必須自己實現(xiàn)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; 
} 
 
可惜俺剛開始不知道之個，所以耗費了很長時間，花費在尋找如何獲取當(dāng)前Column index問題上。 
這樣，我才可以在setData方法中，獲取到DataGridColumn對象，如下（我使用的是AdvancedDataGrid對象）： 
 代碼如下:

var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid; 
//listData就是實現(xiàn)IDropInListItemRenderer接口所可以獲取的 
var gdgc:GanttAdvancedDataGridColumn = 
dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn; 
var dg:AdvancedDataGrid = this.owner as AdvancedDataGrid; 
//listData就是實現(xiàn)IDropInListItemRenderer接口所可以獲取的 
var gdgc:GanttAdvancedDataGridColumn = 
dg.columns[listData.columnIndex] as GanttAdvancedDataGridColumn; 
 
（2）擴展DataGridColumn對象來增加屬性，傳遞參數(shù)。 
有些屬性我需要動態(tài)從外面?zhèn)鬟f進來，但有不屬于list data數(shù)據(jù)的部分。而Grid Header需要利用這些數(shù)據(jù)做一些渲染操作。這時候就需要擴展實現(xiàn)DataGridColumn對象，同時在HeaderRenderer對象中獲取此DataGridColumn對象來獲取參數(shù)。 
如下是擴展的一個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進行設(shè)置： 
 代碼如下:

ganttColumn.startDate = new Date(startTime); 
ganttColumn.lastDate = new Date(lastTime); 
ganttColumn.startDate = new Date(startTime); 
ganttColumn.lastDate = new Date(lastTime); 
 
在HeaderRenderer中，在setData方法中，可以獲取相應(yīng)的對象和參數(shù) 
 代碼如下:

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進行顯示數(shù)據(jù)格式化 
比如我想對日期數(shù)據(jù)進行格式化操作，如下所示： 
 代碼如下:

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"/> 

 
 




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com