DataGrid是显示数据列表的空间，在Swing里面它的对应控件是JTable。
通过DataGridColumn可以设置输出列的数据和表头。
在DataGridColumn中Flex提供了渲染器模式，可以通过自定义绘制来改变默认的显示形式。
这里面的实现方式略同于.Net。
其实我根本不擅长画UI。
?
这次要实现下面的效果
?
?
第一步需要实现一个自定义的渲染器（Renderer）。我取名为BarRenderer。基本来说，一个Renderer只需要有一个set data()方法，已便让DataGrid把数据赋给他。
但是我这里让BarRenderer继承了Canvas类，实现了IDataRenderer， IDropInListItemRenderer类。（下面虽然写着Java代码，其实是Flex代码，这里没有Flex用的代码格式）
?
?
public class BarRenderer extends Canvas implements IDataRenderer, IDropInListItemRenderer
{
}
?
IDataRenderer接口就是data的get set方法，DataGrid将会把整个一行数据放在里面
IDropInListItemRenderer接口里面是listData的get set方法，DataGrid会把一个类型为DataGridListData的数据赋给他。通过listData.owner可以取到DataGrid对象，通过listData.columnIndex方法可以取到当前是第几列。
?
然后在BarRenderer里面要重载updateDisplayList方法。在里面可以用
var g:Graphics = this.graphics;
?取到Graphics对象，然后可以通过这个对象来画图。
和Win32API一样，基点坐标是0，0
?
?
程序代码摘要如下
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number): void {
var g:Graphics = this.graphics;
if (this.data) {
g.clear();
var df:String = this._dataField;
// ...
var cper:String = String(this.data[df]);
var percent:Number = Number(this.data.cper);
var width:Number = percent* unscaledWidth / 100;
if (percent >= 70) {
g.beginFill(0x78ff82);
}else if(percent < 70 && percent > 30) {
g.beginFill(0xF0FD82);
}else {
g.beginFill(0xFF2020);
}
g.drawRect(0, 0, width, unscaledHeight);
g.endFill();
}
}
?
?
2.编写MXML
?
编写MXML有两种方法，如果不需要自定义属性的话，就只要在DataGridColumn里面设置itemRenderer的值为BarRenderer的路径。
?
<mx:DataGrid id="datagrid1" x="20" y="240" width="740" height="350" dataProvider="{members}">
<mx:columns>
<mx:DataGridColumn headerText="号码" width="80" dataField="no"/>
<mx:DataGridColumn headerText="姓名" width="100" dataField="name"/>
<mx:DataGridColumn headerText="拼音" width= "100" dataField="pinyin"/>
<mx:DataGridColumn headerText="住所" dataField="address"/>
<mx:DataGridColumn headerText="电话号码" width= "115" dataField="tel"/>
<mx:DataGridColumn headerText="能力比" width= "100" dataField="cper" itemRenderer="heyesh.app.flex.common.renderer.BarRenderer">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
?
如果要自定义属性的话，就稍微复杂一点，如下
<mx:DataGrid id="datagrid1" x="20" y="240" width="740" height="350" dataProvider="{members}">
<mx:columns>
<mx:DataGridColumn headerText="号码" width="80" dataField="no"/>
<mx:DataGridColumn headerText="姓名" width="100" dataField="name"/>
<mx:DataGridColumn headerText="拼音" width= "100" dataField="pinyin"/>
<mx:DataGridColumn headerText="住所" dataField="address"/>
<mx:DataGridColumn headerText="电话号码" width= "115" dataField="tel"/>
<mx:DataGridColumn headerText="能力比" width= "100" dataField="cper">
<mx:itemRenderer>
<mx:Component>
<renderer:BarRenderer dataField="cper">
</renderer:BarRenderer>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
?
最后把代码传上来，随便写写的，大家看不懂可以问我