现在要实现在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>