Discussion :

[ceriums]

Tout d'abord bonjour.
Après de nombreuses recherches sur la FAQ d'ExtJs, sur le forum, dans l'API, je me tourne vers vous pour éclairer ma lanterne. J'ai exposé mon problème sur le forum officiel mais il est resté sans réponse.

J'ai une Grid, et j'utilise la méthode getRawClass() pour lui appliquer un autre style. Jusque là tout va bien. Ma ligne apparaît en rouge comme souhaité. Seulement voila, lorsque la ligne est survolée, sa couleur change et la couleur par défaut est bleue.
J'essaye de changer celle-ci.

Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
...
viewConfig: {
	getRowClass: function(record, rowIndex) {
		var cls = '';
		if(record.data.paye == 0 && record.data.date_entree < new Date().format('d/m/Y')) {
			cls = 'ligne-rouge';
		}
		return(cls);
	}
},
...

et mon css:

Code :

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

1
2
3
4
5
6
7
.ligne-rouge {
	background-color: #FFDBDB !important;
}
 
.ligne-rouge:hover {
	background-color: #FF0000 !important;
}

Rien d'extraordinaire.
Lorsque je passe la souris sur la ligne, parfois j'aperçois la modification de couleur un très bref instant. De plus, lorsqu'avec firebug j'explore les propriétés CSS de ma ligne, elle possède bien le style voulu. En revanche, elle a également le style suivant: x-grid3-row-over qui donne cette couleur bleue.

La solution serait de faire un removeClass('x-grid3-row-over') mais c'est là que je cale. J'ai fait ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
id: idDeMaGrid,
viewConfig: {
	getRowClass: function(record, rowIndex) {
		var cls = '';
		if(record.data.paye == 0 && record.data.date_entree < new Date().format('d/m/Y')) {
			cls = 'ligne-rouge';
			row = Ext.getCmp('idDeMaGrid').getView().getRow(rowIndex);
			Ext.get(row).removeClass('x-grid3-row-over');
		}
		return(cls);
	}
},
...

Ceci ne marche pas dans mon cas et je ne sais pas pourquoi.

Merci de votre aide.

[sekaijin]

tu as un attribut overCls sur le grid pour spécifier la classe à utiliser pour le over

sinon il te suffit de modifier ton CSS

Code :

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

1
2
3
4
5
6
7
.ligne-rouge {
	background-color: #FFDBDB !important;
}
 
.ligne-rouge.x-grid3-row-over{
	background-color: #FF0000 !important;
}

ainsi lorsque ton div à les deux classe ligne-rouge et x-grid3-row-over il passe en #FF0000

A+JYT