Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex AdvancedDataGrid – Utiliser un Formatter dans une colonne

La classe AdvancedDataGridColumn contient une propriété "formatter" à laquelle vous pouvez passer une instance d'une classe de type Formatter, ou un instance d'une classe héritant de Formatter. La classe Formatter va convertir la donnée en une chaîne personnalisée.
Par exemple, vous pouvez utiliser la classe CurrencyFormatter pour préfixer les valeurs de la colonne de prix avec le signe $ ou €.

Vous pouvez utiliser une classe Formatter en même temps qu'une callback pour la labelFunction et pour la styleFunction. Le fomatter sera appelé après ces fonctions de callback.

L'exemple suivant modifie l'exemple sur l'application de styles aux lignes et ajoute un CurrencyFormatter à la colonne de prix pour lui ajouter le signe €:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
		// Include the data for the AdvancedDataGrid control.
		include "StyleData.as"
		// Artist name to highlight.
		protected var artistName:String;
		// Event handler to set the selected artist's name
		// based on the selected Button control.
		public function setArtistName(event:Event):void{
			artistName=Button(event.currentTarget).label;
			// Refresh row display.
			myADG.invalidateList();
		}
		// Callback function that highlights in red
		// all rows for the selected artist.
		public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if (data["Artist"] == artistName){
				return {color:0xFF0000};
			}
			// Return null if the Artist name does not match.
			return null;
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price">
				<mx:formatter>
					<mx:CurrencyFormatter currencySymbol="€" alignSymbol="right"/>
				</mx:formatter>
			</mx:AdvancedDataGridColumn>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application