使用ItemRenderer處理基於List容器的顯示內容 [DataGrid, Tree, List等]

轉載於：[url]http://liguoliang.com/2009/01/678/[/url]

具體的情況如:使用labelFunction處理DataGrid顯示內容 , 只是這裏使用的是ItemRender來實現並實現更多功能.

如Student中有一Gender_屬性, 1表示男生, 2表示女生, 3表示未知, 現在有下要求:

1. 在DataGrid中不可以顯示1, 2,3, 應顯示 男女 [ 該功能可由LabelFunction實現],

2. 如果爲男生,, 則”男生”顏色爲紅色, 女生顏色爲默認, 未知字體大小爲10號

具體實現:

view plaincopy to clipboardprint?
var columnGender:DataGridColumn = new DataGridColumn();
columnGender.headerText = "Gender";
columnGender.dataField = "Gender_"; //使用ItemRender
columnGender.itemRenderer = new ClassFactory(Gender_Label);
//columnGender.labelFunction = formatGender;

_dataGridStudent.columns = [columnID, columnName, columnAge, columnGender];
ItemRender實現: 該類將繼承List, 重寫其UpdateDisplayList函數, 如下:

view plaincopy to clipboardprint?
package com.test.itemRender
{
import mx.controls.Label;
import mx.controls.listClasses.ListBase;

public class Gender_Label extends Label
{
/**
* 構造函數
*/
public function Gender_Label() {
super();
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(data.Gender_ == 1) {
setStyle('fontSize',14);
setStyle('fontWeight', 'bold');
setStyle('color', 0xDD0000);
this.text = "男生";
}else if(data.Gender_ == 2) {
setStyle('fontSize',14);
this.text = "女生"
}
//otherwise, return the label to its regular state
else {
setStyle('fontSize', 10);
this.text = "未知";
}
}

}// end of class
}// end of package
最終效果:
[img]http://liguoliang.com/wp-content/uploads/2009/01/image3.png[/img]