使用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]