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

Flex AdvancedDataGrid – Utiliser un renderer pour remplir une colonne

L'exemple Flex suivant montre le résultat de l'utilisation d'un itemRenderer utilisé pour calculé la valeur de la colonne Difference du composant AdvancedDataGrid:

Cet exemple définit une colonne ayant l'id "diffCol" qui n'est pas associée avec un dataField (champ) du dataProvider. Au lieu de cela, on va utiliser la propriété rendererProvider pour assigner un itemRenderer à la colonne. L'itemRenderer va calculer la différence entre les valeurs "Actual" et "Estimate", et ensuite afficher une message différent si cette valeur est positive ou non.

Voici le code de l'application Flex principale:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable]
	private var dpHierarchy:ArrayCollection = new ArrayCollection([
	{Region:"Southwest", children: [
		{Region:"Arizona", children: [
			{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
			{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
		{Region:"Central California", children: [
			{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
		{Region:"Nevada", children: [
			{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
		{Region:"Northern California", children: [
			{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
			{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
		{Region:"Southern California", children: [
			{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
			{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
		]}
	]);
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="adg" width="100%" height="100%" creationComplete="adg.expandAll()">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
			<mx:AdvancedDataGridColumn id="diffCol"
			headerText="Difference"/>
		</mx:columns>
		<mx:rendererProviders>
			<mx:AdvancedDataGridRendererProvider column="{diffCol}"
			depth="3" renderer="mycomponents.SummaryRenderer"/>
		</mx:rendererProviders>
	</mx:AdvancedDataGrid>
</mx:Application>

Et le code de l'itemRenderer SummaryRenderer (dans le package mycomponents):

<?xml version="1.0"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center">
	<mx:Script>
	<![CDATA[
	override public function set data(value:Object):void{
		// Calculate the difference.
		var diff:Number = Number(value["Actual"]) - Number(value["Estimate"]);
		if (diff < 0){
			// If Estimate was greater than Actual,
			// display results in red.
			setStyle("color", "red");
			text = "Undersold by " + usdFormatter.format(diff);
		}else{
			// If Estimate was less than Actual,
			// display results in green.
			setStyle("color", "green");
			text = "Exceeded estimate by " + usdFormatter.format(diff);
		}
	}
	]]>
	</mx:Script>
	<mx:CurrencyFormatter id="usdFormatter" precision="2"
		currencySymbol="$" decimalSeparatorFrom="."
		decimalSeparatorTo="." useNegativeSign="true"
		useThousandsSeparator="true" alignSymbol="left"/>
</mx:Label>

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