现在要实现在flex的datagrid中,某一列的值用圆形图标显示,如果该值大于100,显示红色的圆,小于100显示绿色圆,下面是实现这种放式的代码。
首先顶一个列渲染器:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" width="55" height="40" paddingTop="7"
verticalAlign="middle" horizontalAlign="center">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:Glow id="glow" duration="3000"
alphaFrom="1.0" alphaTo="0.3"
blurXFrom="0.0" blurXTo="50.0"
blurYFrom="0.0" blurYTo="50.0"
repeatCount="0"
color="0xaa0000"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
var imgName:String = "";
[Embed(source='/swf/assets/images/ep/ico_light_red.png')]
private var img1:Class ;
[Embed(source='/swf/assets/images/ep/ico_light_orange.png')]
private var img2:Class ;
[Embed(source='/swf/assets/images/ep/ico_light_yellow.png')]
private var img3:Class ;
[Embed(source='/swf/assets/images/ep/ico_light_blue.png')]
private var img4:Class ;
[Embed(source='/swf/assets/images/ep/ico_light_green.png')]
private var img5:Class ;
[Embed(source='/swf/assets/images/ep/ico_light_green.png')]
private var img6:Class ;
override public function set data(value:Object):void{
super.data = value;
var id:int = value.id;
switch(id)
{
case 1:
img.source = img1;
glow.play([img]);
break;
case 2:
img.source = img2;
break;
case 3:
img.source = img3;
break;
case 4:
img.source = img4;
break;
case 5:
img.source = img5;
break;
case 6:
img.source = img6;
break;
}
}
]]>
</fx:Script>
<mx:Image id="img" width="25" height="25" /> //图形
</mx:HBox>使用渲染器的方式:
<components:SpecialDataGrid id="rDg" width="100%" height="265" verticalAlign="middle"
rowHeight="40" sortableColumns="false" headerHeight="25"
dataProvider="{speacDgData}" styleName="specialDg">
<components:columns>
<mx:DataGridColumn textAlign="center" headerText="월" dataField="head1"/>
<mx:DataGridColumn textAlign="center" headerText="상태" dataField="head2"
itemRenderer="com.samsung.serp.common.ep.components.statusDGItemRender"/>
<mx:DataGridColumn textAlign="center" headerText="발생량(건)" dataField="head3"/>
<mx:DataGridColumn textAlign="center" headerText="처리량(건)" dataField="head4"/>
<mx:DataGridColumn textAlign="center" headerText="잔여량(건)" dataField="head5"/>
<mx:DataGridColumn textAlign="center" headerText="대기시간(H)" dataField="head6"
itemRenderer="com.samsung.serp.common.ep.components.colockDGItemRender"/>
</components:columns>
</components:SpecialDataGrid>




