AdvancedDataGrid ajuste affichage cellule

Bonjour,

J`utilise présentement l`outil "AdvancedDataGrid" pour gérer un calendrier de chargement des transports. Les lignes représentent les heures du jour et les colonnes les dates de chargement.

Exemple:

Heure 2009-12-02 2009-12-03 2009-12-04
08:00 --valeur1-- --valeur2-- --valeur3--
08:30 --valeur4-- --valeur5-- --valeur6--

Présentement j`utilise "itemRenderer" avec une classe pour contrôler la couleur de fond de chacune des cellules de la grille en fonction du type de transport. Si il n'y a pas de transport pour cette heure et ce jour la cellule demeure inchangée.

Mon besoin provient du fait que je peux avoir plus de un transport pour une même heure+date, je voudrais donc pouvoir contrôler la cellule et la diviser en plusieurs couleurs; une couleur par type de transport. Je ne sais pas si cela est possible mais je pense qu`il faudrait que la cellule soit un genre d`éditeur HTML.

Merci de votre attention.

Salut,

dans ton itemRenderer il te faut placer les éléments dont tu as besoin , par exemple 2 Hbox qui prennent soit toutes les 2 la meme couleur de fond ou bien deux couleurs différentes pour afficher ta séparation.

Précision sur les solutions possibles

Bonjour,

Merci pour votre réponse, je pense que votre solution est la bonne mais je dois vous expliquez le contexte de l`application.

Premièrement les colonnes de ma grille sont générées de façon dynamique comme le montre le code suivant:

Code:

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
36
37
38
39
40
41
42
43
44
45
46
			private function addGrp ( group:Array, grpentete:String, champ1:String, champ2:String, aligne:String, color:Number, isStyle:Boolean ): void
			{
 
	  		var grp      : AdvancedDataGridColumnGroup  = new AdvancedDataGridColumnGroup();	
  			var col1     : AdvancedDataGridColumn       = new AdvancedDataGridColumn();
			var col2     : AdvancedDataGridColumn       = new AdvancedDataGridColumn();  
 
			grp.headerText = grpentete;
			grp.editable   = false;
			grp.setStyle("textAlign", aligne);
	  		grp.setStyle("fontSize", 14);
 
			col1.dataField  = champ1;
	  		col1.headerText = "Client";
			col1.editable   = false;
 
	  		col1.setStyle("fontSize", 10); 
			col1.setStyle("textAlign", aligne); 
			col1.setStyle("color", color);
 
			if (isStyle == true)
			{
				col1.styleFunction = colIsWorking;	
			}
 
 			col1.itemRenderer  = new ClassFactory(gridFormat);
 
			col2.dataField     = champ2;
			col2.headerText    = "Consommateur";
			col2.editable      = false;
 
	  		col2.setStyle("fontSize", 10);						
			col2.setStyle("textAlign", aligne); 
			col2.setStyle("color", color);
 
			if (isStyle == true)
			{
				col2.styleFunction = colIsWorking;	
			}
 
		            col2.itemRenderer  = new ClassFactory(gridFormat); 			
 			grp.children       = [col1, col2];
 
			group.push( grp ) ;
 
			}

Et voici le code de la classe utilisé pour le renderer.

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package vues {
 
    // myComponents/CellField.as
    import mx.controls.*;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.core.*;
 
    public class gridFormat extends TextArea
    {
 
	    private var tempBGColor:Number;
	    private var hauteur:Number;
	    private var tempStyle:String; 
 
        // Define the constructor and set properties.
        public function gridFormat() {
            super();
            tempBGColor = getStyle("backgroundColor");
            tempStyle   = getStyle("borderStyle");
            hauteur     = height;  
        }
 
        // Override the set method for the data property.
        override public function set data(value:Object):void {
 
            super.data = value;
            setStyle("borderStyle", tempStyle);            
            setStyle("backgroundColor", tempBGColor); 
            height     = hauteur;
 
            if (value != null)
 
            {
 
                text = value[DataGridListData(listData).dataField];
 
                if( text != "" && text.length > 0 )
 
                {
                    height=40;
                    setStyle("backgroundColor", 0xFF0000);
                }
            }
 
            else
            {
                // If value is null, clear text.
                text= "";
            }
 
            super.invalidateDisplayList();
 
        }
    }
}

Donc pour moi deux solutions sont peut être possible:

1: Créer plusieurs renderers dans ma fonction addGrp en utilisant la classe AdvancedDataGridItemRenderer et changer à la volée la valeur dans la colonne en utilsant la classe gridFormat ou labelFunction. (Si vous avez un example de code pour gérer la classe AdvancedDataGridItemRenderer ce serait très utile pour moi)

2: Ou bien générer à la volée dans la classe gridFormat le renderer et encore la je ne sais pas si celà est possible.

Merci de votre attention.