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

Flex AdvancedDataGrid – Utilisation d'itemRenderer simples (column, depth et columnSpan)

Vous pouvez personnaliser l'apparence et le comportement des cellules d'un composant AdvancedDataGrid en créant des item renderers et des item editors spéciaux. Vous pouvez de la même manière assigner des itemRenderer à un composant AdvancedDataGrid que vous le faîtes pour le composant DataGrid.

Tous les tutoriaux sur les itemRenderer Flex

Le composant AdvancedDataGrid apporte de nouvelles fonctionnalités aux itemRenderer. Voici ce que vous pouvez faire avec l'AdvancedDataGrid que vous ne pouviez pas faire avec une DataGrid:

• Créer des lignes ou des colonnes non-associées avec de la donnée du dataProvider. Par exemple, vous pouvez créer des lignes Summary depuis le dataProvider.
• Couvrir plusieurs colonnes avec un renderer
• Utiliser de multiples renderers dans une même colonne. Par exemple, quand vous affichez de la donnée hiérarchique, vous pouvez utiliser différents renderer suivant le niveau de la ligne dans la hiérarchie.

Utilisation simple d'ItemRenderer dans une AdvancedDataGrid

Pour utiliser un itemRenderer dans un composant AdvancedDataGrid, vous ne devez pas assigner l'itemRenderer à une colonne mais au composant AdvancedDataGrid lui-même en utilisant la propriété "rendererProviders".

Le code MXML suivant assigne un itemRenderer à la colonne "Estimate" (columnIndex=3):

<mx:AdvancedDataGrid>
	<mx:columns>
		<mx:AdvancedDataGridColumn dataField="Region"/>
		<mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
		<mx:AdvancedDataGridColumn dataField="Actual"/>
		<mx:AdvancedDataGridColumn dataField="Estimate"/>
	</mx:columns>
	<mx:rendererProviders>
		<mx:AdvancedDataGridRendererProvider
		columnIndex="3"
		columnSpan="1"
		renderer="myComponents.EstimateRenderer"/>
	</mx:rendererProviders>
</mx:AdvancedDataGrid>

La propriété rendererProviders contient un tableau (Array) d'instance de AdvancedDataGridRendererProvider. Chaque instance d'AdvancedDataGridRendererProvider définit les caractéristiques d'un itemRenderer. Dans le morceau de code juste au dessus, l'instance d'AdvancedDataGridRendererProvider spécifie qu'il utilise EstimateRenderer pour la colonne 3 (la première colonne a l'index 0), et le renderer s'étend sur une seule colonne.

Si vous fixez la propriété columnSpan à 0, le renderer va couvrir toutes les colonnes.

Utilisation de la propriété "column"

Plutôt que d'utiliser un columnIndex pour assigner un itemRenderer, vous pouvez utiliser la propriété "column" en lui spécifiant l'id d'une colonne pour faire l'association. Voici un exemple d'utilisant de cette propriété "column":

<mx:AdvancedDataGrid>
	<mx:columns>
		<mx:AdvancedDataGridColumn dataField="Region"/>
		<mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
		<mx:AdvancedDataGridColumn dataField="Actual"/>
		<mx:AdvancedDataGridColumn id="estCol" dataField="Estimate"/>
	</mx:columns>
	<mx:rendererProviders>
		<mx:AdvancedDataGridRendererProvider
		column="{estCol}"
		columnSpan="1"
		renderer="myComponents.EstimateRenderer"/>
	</mx:rendererProviders>
</mx:AdvancedDataGrid>

Utilisation de la propriété "depth"

La propriété depth vous permet d'associer un renderer à un niveau spécifique de la hiérarchie d'un arbre de navigation d'un composant AdvancedDataGrid. La depth (profondeur) du noeud le plus haut est 1. L'exemple de code MXML suivant associé un renderer avec le troisième niveau de hiérarchie du navigation tree:

<mx:rendererProviders>
	<mx:AdvancedDataGridRendererProvider
	columnIndex="3"
	depth="3"
	columnSpan="1"
	renderer="myComponents.EstimateRenderer"/>
</mx:rendererProviders>

Résumé des propriétés importantes de la classe AdvancedDataGridRendererProvider

• column: Spécifie l'id de colonne pour lequel le renderer sera utilisé. Si vous ne précisez pas cette propriété, vous pouvez utiliser la propriété columnIndex pour spécifier la colonne.
• columnIndex: Index de la colonne pour lequel le renderer est utilisé, où la première colonne a un index de 0
• columnSpan: Nombre de colonne que le renderer couvre (1 par défaut). Fixez cette propriété à 0 pour couvrir toutes les colonnes.
• dataField: Le champ du dataProvider pour le renderer (optionnel)
• depth: Profondeur du tree pour laquelle le renderer est utilisé où le noeud le plus haut à une depth de 1. Utilisez cette propriété pour les renderer qui ne doivent être utilisé que quand le tree est étendu jusqu'à une certaine profondeur, par pour tous les noeuds du Tree. Par défaut, le composant AdvancedDataGrid utilise le renderer pour tous les niveaux du Tree
• renderer: Le Renderer (fichier MXML ou classe AS3)
• rowSpan: Nombre de ligne que couvre le renderer (1 par défaut)