Le principe : on définit pour la colonne du datagrid un renderer de cette façon :

<mx:DataGridColumn headerText="Column 4" dataField="nCmd" width="70"
itemRenderer="com.phiphou.renderers.StatusRenderer">
</mx:DataGridColumn>

Et le fichier 'StatusRenderer' ressemble à peu près à ça :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" 
width="100%" height="100%" horizontalScrollPolicy="off"
horizontalGap="1" verticalAlign="middle" >
 
<mx:Image id="status_img" width="15" height="15" />
<mx:Label width="100%" text="{_text}"/>
 
<mx:Script>
<![CDATA[
	
	[Embed("/assets/logo.swf")]
	private var statusSWF:Class;
		
	[Embed("/assets/logo.png")]
	private var statusPNG:Class;
		
	[Bindable]
	private var _text:String;
	
	override public function set data(value:Object) : void
		{
			super.data = value;
			
			if( value != null ) {
				_text = data.nCmd;
				
				if( data.nCmd % 2 == 0 ) {
					status_img.source = statusSWF;
				}
				else {
					status_img.source = statusPNG;
				}
			} else {
				_text = "";
			}
		}	
	]]>
	</mx:Script>
</mx:HBox>

Voilà pour le principe...

D'autre types de renderers :

- avec une checkbox :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
	horizontalScrollPolicy="off"
	horizontalGap="0"
	verticalAlign="middle" horizontalAlign="center" 
        width="15" height="15"> 
 
<mx:CheckBox selected="{data.nCmd % 2 == 0}"  width="15"/> 
 
</mx:HBox>

- avec un texte formaté :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" horizontalGap="1" verticalAlign="middle">
<mx:TextArea wordWrap="true" text="{_text}" borderStyle="none"
backgroundAlpha="0" editable="false" selectable="false"
fontFamily="{_font}" fontSize="{_size}"
fontWeight="{_fontWeight}" height="25" color="{_color}"/>
	
<mx:Script>
<![CDATA[
	
[Bindable]
private var _text:String;
[Bindable]
private var _color:uint;
[Bindable]
private var _font:String;
[Bindable]
private var _size:Number;
[Bindable]
private var _fontWeight:String;
		
override public function set data(value:Object) : void
{
	super.data = value;
			
	if( value != null ) {
				
	_text = data.customer_name;
	_color = data.name.length >= 9 ? 0x0000FF : 0xFF0000;
	_font = data.name.length >= 9 ? "Courier New" : "Arial";
	_size = data.name.length >= 9 ? 10 : 12;
	_fontWeight= data.name.length <= 3 ? "bold" : "normal";
				
	} else {
		_text = "";
	}
}	
]]>
</mx:Script>
</mx:HBox>

Voyons enfin deux autres types de renderers : un renderer écrit en AS3 (pour plus de contrôle) et un renderer avec un bouton.

- Renderer en AS3 :

package com.phiphou.renderers
{
	import mx.controls.Label;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Matrix;
	
	public class GradientRenderer extends Label
	{
		public var range:Array;
		private var Color1:Number;
                private var Color2:Number;
        		
		public function GradientRenderer()
		{
			super();
			initRange();
			
      	}
		
        private function initRange():void
        {
			range = new Array();
			range.push({value:90,  color1:0xFF0000, color2:0xFFC888});  
			range.push({value:100, color1:0xFFA500, color2:0x44A228}); 
			range.push({value:110, color1:0x00FF00, color2:0x004488});
        }
       
	override public function set data(value:Object):void 
	{
		Color1 = 0xFFFFFF;
		Color2 = 0xFFFFFF;
			
		super.data = value;
		if (value != null) 
		{
			var currentValue:Number = Number(listData.label);
			var len:Number = range.length;
			for (var i:Number = 0; i < len; i++) {
				var limit:Object = range[i];
				if (limit.value <= currentValue) {
					bgColor1 = limit.color1;
					bgColor2 = limit.color2;
				}
			}
		} 
	}
 		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
 
			var fillType:String = GradientType.LINEAR;
			var matr:Matrix = new Matrix();
			matr.createGradientBox(unscaledWidth,unscaledHeight,0,0,0);
			var colors:Array=[Color1,Color2];
			var alphas:Array=[100,100,];
			var ratios:Array=[0,255];
			var spreadMethod:String = SpreadMethod.PAD;
			var interpolationMethod:String = "RGB";
			var focalPointRatio:Number = 1;	
				
			var gradient:Graphics = graphics;
			gradient.clear();
			gradient.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod,interpolationMethod,focalPointRatio);  
			gradient.drawRect(0, 0, unscaledWidth, unscaledHeight);
			gradient.endFill();
		}
	}
}

- Renderer avec un bouton :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="middle" width="40" height="25">
<mx:Metadata>
   [Event(name="deleteEvent", type="flash.events.Event")]
</mx:Metadata>
 
   <mx:Script>
    	<![CDATA[
    
    	import mx.events.DataGridEvent;
    
    	public function callDelete(pData:String):void {
							
		var eventObj:Event = new Event("deleteEvent");
                dispatchEvent(eventObj);
	}	
		
    	]]>
    </mx:Script>
 
<mx:Button click="callDelete(data.nCmd)" width="30" 
icon="@Embed('/assets/cross.gif')"/>
</mx:VBox>

Mais attention, ce renderer ne se spécifie pas de la même manière pour le datagrid. Ainsi, nous le spécifierons comme ceci :

<mx:DataGridColumn headerText="Column 6" dataField="nCmd" width="40">
<mx:itemRenderer>
	<mx:Component>
		<renderers:deleteRenderer deleteEvent="outerDocument.askRemove(data)"/>
	</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

En ayant spécifié le namespace 'renderer' dans la balise 'Application' comme ceci :

xmlns:renderers="com.phiphou.renderers.*"

Enfin, pour intercepter l'event 'deleteEvent' dispatché par le renderer, nous écrivons quelque chose du genre :

public function askRemove(pData:Object):void {
					
	Alert.yesLabel = "Oui";
        Alert.noLabel = "Non";
	Alert.show("Etes-vous sûr de vouloir\nsupprimer l'utilisateur\n"+pData.nCmd+" ?",
	"Suppression",1|2,this,RemoveClickHandler);
}		
				
private function RemoveClickHandler(event:CloseEvent):void {
					
   if (event.detail==Alert.YES){
 
           _dataProvider.removeItemAt(dg.selectedIndex);
              
  }
                  
}

Voici un petit exemple qui montre donc ces différents types de renderers.

;

Voilà de quoi vous amuser avec les itemsRenderers...