flex中datagrid列渲染器的写法

摘要

现在要实现在flex的datagrid中,某一列的值用圆形图标显示,如果该值大于100,显示红色的圆,小于100显示绿色圆,下面是实现这种放式的代码。

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


IT家园
IT家园

网友最新评论 (0)