Discussion :

[BqiKo]

Hi all !

I have a question !
Je voulais savoir comment colorier les lignes d'une grille (pas forcément selectionnée). Je voudrais faire un degradé (pas plus de 3-4 couleurs, c'est à dire que quand on arrive a la 3ème ligne, la ligne suivante reprendre la couleur de la 1ère ligne) pour qu'on puisse mieux visualiser les différentes lignes.

Voilou.
Merki !

[takitano]

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
var grid = new Ext.grid.GridPanel({
    store:mon_sotre,
        columns: [...],
    }),
 
//C'EST ICI ... ! => modifier le getRowClass ... retourner le nom de la class ... 
    viewConfig: {
        forceFit: true,
 
//      Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});

[BqiKo]

Merci Taki`.
J'ai trouvé ma solution mais ce n'est pas exactement ce que tu as posté !
J'explique pour ceux qui voudront se renseigner :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
viewConfig: {
                    forceFit: true, /*Specify true to have the column widths re-proportioned at all times.
                                    The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling.
                                     If columns are later resized (manually or programmatically),
                                    the other columns in the grid will be resized to fit the grid width.*/
                    autofill : true
                },
               view: new Ext.grid.GridView({
                            getRowClass : function(row, index){
                                var cls = '';
                                var data = row.data;
                                if (data.STATE == 'Pris en charge'){cls = 'lm-grid';}
                                return cls;}
               })

Voila mon code. Le GridView doit être déclarer ainsi, et non dans viewConfig ! Et aussi, si view: est déclaré, la viewConfig n'est plus effective.

Voila

[takitano]

all rights ...

un petit clique sur "résolu" ... ^^
...
si tu peux, montre nous ton coloriage ...

merci ..;

[mynour]

Bonjour!

voilà c'est ma solution pour colorier les lignes paires et impaires

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
 
 
	var r = 0;
        var gridView = new Ext.grid.GridView({
 
            getRowClass : function (row, index) {      
              	var cls = '';       
              	if(r==0){
              		cls = 'row-color'; 
              		r=1;
              	}
              	else {
              		cls = ''; 
              		r=0;
              	}
              return cls; 
           } 
        });

[takitano]

ben ... je n'avais pas tout a fait tord ... alors :p

si tu pouvais nous montrer ton petit dessin mynour ...
pour voir le rendu ...

Takitano

[mynour]

Voilà le résultat

[BqiKo]

J'ai une question pour finir totalement ce topic..

Je dois faire un degradé de couleur (3 au total) pour bien différencier les lignes de ma grille.
Cependant je ne trouve pas d'algorithme qui me permet de le faire.. Il faudrait que toutes les 3 lignes, la premiere couleur revienne !

Si quelqu'un a une idée, je suis preneur !

[mynour]

Je sais pas si j'ai bien compris ta question, mais je pense que c'est ça.

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
 
	var r = 1;
        var gridView = new Ext.grid.GridView({
 
            getRowClass : function (row, index) {      
              	var cls = '';       
              	if(r==1){
              		cls = 'row-color1'; 
              		r=2;
                        return cls; 
              	}
              	else if (r==2) {
              		cls = 'row-color2'; 
              		r=3;
                        return cls; 
              	}
              	else if (r==3) {
              		cls = 'row-color3'; 
              		r=1; 
                        return cls; 
              	}
           } 
        });

[BqiKo]

Ca ne marche pas
Toute mes lignes sont coloré de la couleur de "row-color1"

[mynour]

c'est à dire que r égale toujours à 1, il faut qu'il soit une variable globale.

tu peux me montrer ton code stp ?

[BqiKo]

Oui. C'est que en faite, dans mon code, je remet r=1 a chaque fois. J'arrive pas a sortir ma variable r, parceque sa me met une erreur.

Voici mon code :

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
view: new Ext.grid.GridView({
 
                    getRowClass : function (row, index){
                        var cls = '';
                        var r=1;
                        if(r==1){
                            cls = 'lm-grid1';
                            r=2;
                            return cls;
                        }
                        else if(r==2){
                            cls = 'lm-grid2';
                            r=3;
                            return cls;
                        }
                        else if(r==3){
                            cls = 'lm-grid3';
                            r=1;
                            return cls;
                        }   
                    }
                })

[mynour]

Essaye de faire comme ça

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
 
	var r = 1;
        var gridView = new Ext.grid.GridView({
 
            getRowClass : function (row, index) {      
              	var cls = '';       
              	if(r==1){
              		cls = 'row-color1'; 
              		r=2;
                        return cls; 
              	}
              	else if (r==2) {
              		cls = 'row-color2'; 
              		r=3;
                        return cls; 
              	}
              	else if (r==3) {
              		cls = 'row-color3'; 
              		r=1; 
                        return cls; 
              	}
           } 
        }); 
 
           // grid
	    var Grid = new Ext.grid.GridPanel(
	    		{
	                xtype: 'grid',
	                store: store,
                        // ici tu place ton variable gridview
	                view: gridView,
	                columns: [
	                    {
                                .....

[BqiKo]

C'est niquel !

Merci beaucoup !

[mynour]

de rien!