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

Flex AdvancedDataGrid – Utiliser le champ GroupLabel pour nommer une colonne créée avec Grouping

Dans le tutorial flex précédent, on utilisait les objets GroupingCollection et Grouping pour faire des regroupement sur une donnée à plat.

Comme indiqué à la fin de l'article, la représentation interne de la donnée groupée de cette manière est la suivante:

[{GroupLabel:"Southwest", children:[
  {GroupLabel:"Arizona", children:[
    {Region:"Southwest", Territory:"Arizona",
     Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
    {Region:"Southwest", Territory:"Arizona",
     Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
  {GroupLabel:"Central California", children:[
    {Region:"Southwest", Territory:"Central California",
     Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
     ....

Par défaut, Flex crée un champ "GroupLabel" qui va contenir le nom du groupe en question. On peut alors afficher ces groupes dans une colonne que l'on va créer et à laquelle on pourra donner le nom que l'on souhaite.

Par exemple, vous groupez votre data selon les champs Region et Territory. Ces champs apparaissent dans la donnée, si vous créez une colonne pour les afficher en donnant le "dataField" correspondant, vous pourrez les afficher mais ils feront doublons car déjà utilisé dans les groupes de l'arbre.

Vous pouvez en revanche créer une colonne ayant comme dataField "GroupLabel" et le label de votre choix. Dans notre exemple, on a pris "Region / Territory" comme label. Cela permet d'avoir une représentation plus synthétique.

Voici l'exemple MXML:

<?xml version="1.0"?>
<!-- dpcontrols/adg/SimpleGroupADGMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleFlatData.as"
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		initialize="gc.refresh();">
		<mx:dataProvider>
			<mx:GroupingCollection id="gc" source="{dpFlat}">
				<mx:grouping>
					<mx:Grouping>
						<mx:GroupingField name="Region"/>
						<mx:GroupingField name="Territory"/>
					</mx:Grouping>
				</mx:grouping>
			</mx:GroupingCollection>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="GroupLabel"
			headerText="Region/Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

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