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

Flex AdvancdDataGrid – Utiliser une colonne spécialement pour le Tree de navigation

Dans cet exemple Flex, on affiche de la donnée hierarchique dans un Tree dans une AdvancedDataGrid. La première colonne affiche en même temps le champ "Region" de la donnée. C'est pourquoi, si vous ouvrez les noeuds du Tree, le label de chaque noeud du Tree correspond à la valeur du champ "Region" du dataProvider pour la ligne concernée. Pour les "feuilles" (leaf), le dataProvider ne contient pas de valeur pour le champ "Region", les labels de ces lignes sont donc vides.

Vous pouvez aussi mettre cet arbre de navigation dans sa propre colonne, qui ne sera associée avec aucun champ. Cet exemple n'associe pas de champ à la colonne, donc les icônes de l'arbre apparaissent dans label. On met aussi à "null" les propriétés folderClosedIcon, folderOpenIcon et defaultLeafIcon mais pas celui des icon "disclosure" pour que l'utilisateur puisse encore ouvrir et fermer ses nœuds.

La première colonne de l'AdvancedDataGrid est automatiquement utilisée pour afficher le navigation Tree. Pour utiliser une autre colonne, suivez ce tuto flex:

Flex AdvancedDataGrid - Utiliser treeColumn pour définir la colonne qui va contenir le Tree

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		include "SimpleHierarchicalData.as";
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid width="100%" height="100%"
		folderClosedIcon="{null}"
		folderOpenIcon="{null}"
		defaultLeafIcon="{null}">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="" width="50"/>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<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