Discussion :

[dut-dut]

Bonjour,
c'est mon premier post concernant Flex ! J'essaie d'optimiser un écran avec un datagrid utilisant 3 itemrenderer. Voila le topo...

J'alimente mon datagrid avec une ArrayCollection. Dans les 3 dernières colonnes, les valeurs "1", "2" ou "3" sont remplacées par des icônes pour plus d'ergionomie. A l'heure actuelle j'ai 3 composants différents pour chacune des 3 colonnes : A_StatusIcon, B_StatusIcon, C_StatusIcon.

Le truc c'est que ces 3 itemrenderer sont exactement les mêmes à un paramètre près : la colonne à laquelle ils s'intéressent. Je souhaiterais donc inclure l'index de la colonne comme paramètre pour n'utiliser plus qu'un seul composant StatusIcon partout.

Si quelqu'un à déjà résolu ce genre de cas... Merci de votre aide.

Voici le code principal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.treeClasses.TreeItemRenderer;
            import custom_components.*;
        		
            [Bindable] // ça c'est l'ArrayCollection qui alimente mon DataGrid
            private var myDP:ArrayCollection = new ArrayCollection([
                {col1:"330-200", col2:"H-AAAA", col3:"123", col4:"TLS", col5:1, col6:2, col7:3},
		 {col1:"330-200", col2:"H-AAAT", col3:"142", col4:"CDG", col5:1, col6:2, col7:3}
            ]);			

		]]>
	</mx:Script>
	
	                // ça c'est le DataGrid
			<mx:DataGrid dataProvider="{myDP}" id="tableau" borderStyle="solid" borderThickness="0">
				<mx:columns>
					<mx:DataGridColumn headerText="A/C Type" textAlign="center" dataField="col1" width="70"/>
					<mx:DataGridColumn headerText="Registr." textAlign="center" dataField="col2" width="70"/>
					<mx:DataGridColumn headerText="MSN" textAlign="center" dataField="col3"/>
					<mx:DataGridColumn headerText="Localization" textAlign="center" dataField="col4"/>
                                        // sur les 3 dernière colonnes j'appelle un itemRenderer
					<mx:DataGridColumn headerText="ChkA" textAlign="center" width="40" itemRenderer="custom_components.A_StatusIcon"/>					
					<mx:DataGridColumn headerText="ChkB" textAlign="center" width="40" itemRenderer="custom_components.B_StatusIcon"/>					
					<mx:DataGridColumn headerText="ChkC" textAlign="center" width="40" itemRenderer="custom_components.C_StatusIcon"/>									
				</mx:columns>
			</mx:DataGrid>

</mx:Application>

Et ici c'est le code de l'itemrenderer A_StatusIcon.mxml.
On voit que le nom de la colonne (col5) est pour le moment en dur. Les 2 autres itemrendrer sont exactement pareils sauf pour B c'est col6 et C c'est col7...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" toolTip="Status">
   <mx:Script>
        <![CDATA[
            
            [Embed(source="/icons/OK.png")]
            private var OKIcon:Class;
            [Embed(source="/icons/Warning.png")]
            private var WarningIcon:Class;
            [Embed(source="/icons/Problem.png")]
            private var ProblemIcon:Class;
            
            [Bindable]
            public var A_status:Class;
            
            
	    override public function set data(value:Object):void {
                super.data = value; // on récupère les données de toute la ligne
                
                // puis on fait un test sur la valeur contenue dans la colonne 5 pour savoir quel icône doit être utilisé
                if ((value).col5 == 1) {
                	A_status = OKIcon;
                }
                if ((value).col5 == 2) {
                	A_status = WarningIcon;
                }
                if ((value).col5 == 3) {
                	A_status = ProblemIcon;
                }
            }
        ]]>
    </mx:Script>

    <mx:Image id="imageSource" source="{A_status}"/>
</mx:HBox>

[ellene]

Tiens voici un tuto qui m'a bien aidé au moment où j'en avais besoin : http://flexgeek.wordpress.com/2007/0...tiple-columns/
Il faut créer un item renderer dans lequel tu auras fusionné tes trois composants qui implémente IDropInListItemRenderer.

++

[jylaxx]

Il faut que ton itemRenderer implémente l'interface IDropInListItemRenderer qui permet d'accèder à la propriété listData de type DataGridListData dans une DataGrid.
DataGridListData a une propriété dataField qui permettra de résoudre ton problème.

Edit: Désolé ellene j'avais pas réalisé que ma réponse était redondante...

[samy2525]

Bonjour,

Pour avoir un Itemrenderer !génirique tu peut utiliser la methode hasOwnProperty("");

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 // puis on fait un test sur la valeur contenue dans la colonne 5 pour savoir quel icône doit être utilisé
                if ((value).col5 == 1) {
                	A_status = OKIcon;
                }
                if ((value).col5 == 2) {
                	A_status = WarningIcon;
                }
                if ((value).col5 == 3) {
                	A_status = ProblemIcon;
                }

// puis on fait un test sur la valeur contenue dans la colonne 5 pour savoir quel icône doit être utilisé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 A_status   = new Class();
                if (value.hasOwnProperty("col3") ) {
                       A_status  = getIconStatut(value.col3)
                }
 
                if (value.hasOwnProperty("col4") ) {
                       A_status  = getIconStatut(value.col4)
                }
 
                if (value.hasOwnProperty("col5") ) {
                       A_status  = getIconStatut(value.col5)
                }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private function getIconStatut(tmpStr : String) : Class
                {
 
                         switch (tmpStr){
                         case 1 :
                              return  OKIcon;
 
                         case 2 :
                              return  OKIcon;
 
                         case 3 :
                              return  OKIcon;
 
                         }
                }

j'aurai vu quelque chose comme ça

Bon courage
Samy

[dut-dut]

Excellent tutoriel !!

Merci pour vos réponses rapides et ultra-pertinentes...

@+




.......