MVC - ActionColumn, getClass, itemmouseenter, itemmouseleave?

Version imprimable

Bonjour à tous,

J'ai dans ma grid 3 actionColumns.

J'ai un problème avec celui du centre qui est un peu particulier. Je m'explique, celui du centre permet de choisir une icône dans une liste d'icônes.
Je dois donc afficher une première icône (légèrement grise) au passage de la souris pour indiquer que l'on peut cliquer dessus.

Le problème que j'ai, c'est que dans le itemmouseenter et le itemmouseleave, je n'arrive pas à trouver comment récupérer le iconCls pour afficher l’icône légèrement grisée.

Si j'utilise icon: et non iconCls:, cela affiche bien l'icône au passage de la souris mais j'ai deux icônes superposées sur celle qui ont déjà été affectées... Oula... ça devient dur à expliquer.

Je vais donc poser la question : Comment récupérer le iconCls dans le onmouseenter car là ma souris n'affiche rien au passage.

Voici le code que j'utilise.

La colonne :

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
{ 
	text        : '',
	width       : 24,
	xtype       : 'actioncolumn',
	dataIndex   : 'flag',
	cls         : 'RemoveLine', // permet d'effacer le séparateur dans le header
	align       : 'center',
	hideable    : false,
	menuDisabled: 'true',
	sortable    : false,
	fixed       : 'true',
	items : [
			{
				tooltip     : 'Click to set it as important information',
				iconCls     : 'flagnb',
				//icon:  'resources/icons/flag/flagnb.png',
				handler     : function(view, rowIndex, colIndex, item, e) {
								this.up('grid').fireEvent('itemactionclick', this, 'flag', view, rowIndex, colIndex, item, e);
				},
 
				getClass: function(v, meta, record) {
					// Si flag = -1 alors il faut afficher le flag
					// Si flag >=0 alors il faut afficher l'icone
					// je return le nom d'une class donc voir button.css
					if (v===-1) {
						return 'x-hide-display';
					} else {
						return 'flag' + v;
					}                                                        
				}
			}
	]
},

Voici le code onmouseenter :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
viewConfig:{
 
	listeners: {
		itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
			// show the icon
			if (record.get('flag')<0) {
//>>> cela ne marche pas non plus avec cette ligne
				//var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
 
//>>>> cette ligne fonctionne si je ne mets pas iconCls avec un css mais icon: avec le chemin de mon image
//>>>> mais si j'ai déjà un falg alors il y 2 icones superposées (normal car icon et celle du css)
				var cmp = Ext.select('#' + Ext.get(item).id +' [src~="resources/icons/flag/flagnb.png"]');
//>>>> comment faire ici pour changer le iconCls pour mettre un autre ?
 
				cmp.removeCls('x-hide-display');
				cmp.addCls('x-grid-center-icon');
			}

Désolé si ce n'est pas clair mais ce n'est pas évident à expliquer. :)

07/11/2014, 15h50
Bruno13
Voici quelques infos supplémentaires, sur les 3 actionColumn:
- la 1ère et la 3ème utilise la propriété icon:
- la 2ème (celle où j'ai le problème) utilise iconCls: (sinon cela ne fonctionne pas)

En regardant ce que vaut cmp en faisant:
Code:

1 2 3 var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon'); console.log(cmp);
la 1ère et la 3ème affichent pour l'elements->attributs[2]

Code:

src="resources/icons/pencil.png"

mais pour la 2ème j'ai :

Code:

src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="

je suppose que cela vient du fait que j'utilise iconCls, et en plus mon icône est une png aussi

mais alors comment puis-je faire ?

j'ai essayé:
Code:

1 2 3 4 var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon'); var a = cmp.elements[1]; a.removeCls('x-hide-display'); a.addCls('x-grid-center-icon');
mais dès le premier a.removeCls j'obtiens l'erreur:
Code:

1 2 TypeError: a.removeCls is not a function a.removeCls('x-hide-display');
une idée ?
08/11/2014, 00h48
Bruno13

Bon alors là cela dépasse mes capacités, il semblerait que :

Code:

src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="

soit une icône 1 pixel qui s'affiche si l'image à afficher n'existe pas ou a un problème.

Le hic c'est que mon icone existe (elle s'affiche si je fais un icon: ou si je la recherche en absolu)

Help !
08/11/2014, 14h44
sekaijin

non on utilise cette image de 1 pixel transparente lorsqu'on veut réserver un place et utiliser une image via un CSS

par exemple tu veux afficher une icône de 48x48 dans une vue mais tu veux que cette icône soit affichée par le CSS pour cela tu fais une classe CSS qui a l'attribut BGImage avec l'url de ton image.
mais pour l'afficher il va te falloir avoir un TAG qui fait 48x48 avec cette classe. il faut de plus que cet espace ne soit pas opaque car on ne vairrait pas le background tu crées donc un tag img avec l'url de cette image de 1px transparente que tu taille à 48x48 et tu lui associe ta classe.

pour changer de thème et donc d'icône il ne te reste qu'à changer le CSS

pareil pour le mouse over en mettant une image transparente
il te suffit de mettre dans ton css une pseudo classe :hover associé à ta classe pour que l'image change
pas de js rien que du css

http://www.w3schools.com/cssref/sel_hover.asp

tout cela est du pur css html
rien de spécifique dans ExtJs
A+JYT
08/11/2014, 16h56
Bruno13

Salut Sekaijin,

Alors là désolé mais j'ai rien compris :( :roll:

pourquoi il m'affiche une icone de 1px au lieu de celle de ma class "flagnb" défini dans iconCls de la colonne?

pour info, dans mon css, j'ai bien:

Code:

.flagnb { background-image:url('../icons/flag/flagnb.png') !important; width:16px;height:16px; }

ok ça marche !!!!!!!

4 jours que je galère sur ce problème !!

voici ce que j'ai fait suivant tes conseils Sekaijin

Dans la définition de la colonne, toujours pareil, pas de icon: mais un iconCls: 'flagnb' (image en noir et blanc) avec son getClass associé

Code:

1
2
3
4
5
6
7
8
9
10
11
                        iconCls     : 'flagnb',
                        getClass: function(v, meta, record) {
                            // Si flag = -1 alors il faut afficher le flag
                            // Si flag >=0 alors il faut afficher l'icone
                            // je return le nom d'une class donc voir button.css
                            if (v===-1) {
                                return 'x-hide-display';
                            } else {
                                return 'flag' + v;
                            }                                                        
                        }

j'ai défini des class dans mon css de cette manière:

Code:

1
2
3
4
5
6
7
8
9
.flagnb:hover {
    background-image:url('../icons/flag/flagnb.png')
} 
.flag0 { background-image:url('../icons/flag/0.png') !important; width:16px;height:16px; }
.flag1 { background-image:url('../icons/flag/1.png') !important; width:16px;height:16px; }
.flag2 { background-image:url('../icons/flag/2.png') !important; width:16px;height:16px; }
.flag3 { background-image:url('../icons/flag/3.png') !important; width:16px;height:16px; }
.flag4 { background-image:url('../icons/flag/4.png') !important; width:16px;height:16px; }
.flag5 { background-image:url('../icons/flag/5.png') !important; width:16px;height:16px; }

dans le itemmouseenter de ma grid:

Code:

1
2
3
4
5
6
7
                itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
                    // show the icon
                    if (record.get('flag')<0) {
                        var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                        cmp.removeCls('x-hide-display');
                        cmp.addCls('flagnb');
                    }

dans mon itemmouseleave de ma grid:

Code:

1
2
3
4
5
6
7
8
9
10
                itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
                    // hide the icon
                    if (record.get('flag')<0) {
                        //var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
                        var cmp = Ext.select('#' + Ext.get(item).id +' [src~="resources/icons/flag/flagnb.png"]'); 
                        cmp.removeCls('x-grid-center-icon');
                        //cmp.removeCls('flagnb');
                        cmp.addCls('x-hide-display');        
                    }
               }

et voilà ! si mon enregistrement record['flag'] contient une valeur >= 0 alors j'affiche la classe flag + valeur
sinon j'affiche mon icon grisée invitant l'utilisateur à cliquer dessus. Pour ceux qui connaissent comme dans Yahoo!Mail

08/11/2014, 17h38
Bruno13

hélas fausse joie, je n'avais pas vu que l’icône grisée s'affichait aussi sur les autres actioncolumns si elle n'était pas encore affectée.
pour le voir il faut passer la souris sur les autres actioncolumns et on a l'icône de l'action column en superposition de l'icône grisée qui ne devrait pas être là...

bon je suppose qu'un test devrait faire l'affaire...
08/11/2014, 18h13
sekaijin

Citation:

Envoyé par Bruno13

Salut Sekaijin,

Alors là désolé mais j'ai rien compris :( :roll:

pourquoi il m'affiche une icone de 1px au lieu de celle de ma class "flagnb" défini dans iconCls de la colonne?

pour info, dans mon css, j'ai bien:

Code:

.flagnb { background-image:url('../icons/flag/flagnb.png') !important; width:16px;height:16px; }

il affiche un image transparente dans le HTML
pour laisser voir la background-image définie dans le CSS

je te conseille de faire ça pour le mouseover et non de changer la classe en javascript http://www.developpez.net/forums/d14...r/#post8025708

A+JYT
09/11/2014, 13h52
Bruno13

Oui comme tu peux le voir j'ai suivi ton conseil mais hélas cela ne fonctionne pour l'instant qu'à moitié (et même qu'à 1/3 :) ) car j'ai aussi l'icône qui s'affiche dans les autres actioncolumns...

comment puis-je faire pour n'avoir l'icône qui s'affiche que sur l'actioncolumn du centre?

je continue mon investigation..je vais bien y arriver quand même...
09/11/2014, 15h42
sekaijin

ce que je ne comprends pas c'est la présence de itemmouseenter: function( et de itemmouseleave: function(.

il n'y a normalement pas besoin de javascript pour faire un mouseover

pour que ça ne s'applique qu'à un objet dans ton css tu définis une classe pour chaque actioncolumn
et tu définis un :hover différent pour chacune de ces classes

dans le code ExtsJS à la création tu associes à chaque actioncolumn la classe qui lui est dédié et c'est tout.

Je pense que tu devrais te faire un exemple en pur HTML pour comprendre comment ça marche.

là j'ai l'impression que tu à mis ton hover sur un truc commun à toutes tes actioncolumn

A+JYT
09/11/2014, 16h53
Bruno13

Justement j'allais faire une remarque qui est la suivante:

Comme je veux que les icônes invitant l'utilisateur à apposer un smiley, une note, un commentaire s'affichent aussi lorsque la souris survole les autres colonnes,
j'utilise le itemmouseenter de la grid au lieu d'un simple hover.

et effectivement là c'est global aux 3 actioncolumns...

donc cette solution hélas n'est pas bonne. Je comprends bien comment elle fonctionne mais maintenant après quelques essais,
je m'aperçois qu'il me manque l'aspect "si ma souris survole d'autres colonnes"

Je voudrais faire exactement comme Yahoo!Mail pour info.

il y a eu une discussion (peut-être plusieurs) sur les forum Ext à ce propos

pour afficher une invite pourquoi ne pas utiliser un tooltip ?

Code:

1
2
3
4
5
6
7
8
{
   xtype:'actioncolumn',
   width:100,
   items: [{
      iconCls: 'maClasse'
      tooltip: 'merci de poster une commentaire'
   }]
}

Code:

1
2
3
4
5
6
7
8
  .maClasse{
    background:url(une/icone.gif);
    height:16px;
    width:16px;
  }
  .maClasse{
    background:url(une/autre/icone.gif);
  }

A+JYT

09/11/2014, 18h46
Bruno13

Parce que ce n'est pas exactement ça que je veux hélas.

avec cette méthode, si la souris passe au dessus d'une autre colonne, par exemple, une colonne "Title", là je n'aurais pas les 3 icônes des actions colonnes qui s'afficherait non ?

De plus dans l'exemple que tu donnes sur les classes, peut on nommer 2 fois une classe avec un même nom? ou est-ce juste une faute de frappe ?
10/11/2014, 16h22
sekaijin
Citation:

Envoyé par Bruno13

Parce que ce n'est pas exactement ça que je veux hélas.

avec cette méthode, si la souris passe au dessus d'une autre colonne, par exemple, une colonne "Title", là je n'aurais pas les 3 icônes des actions colonnes qui s'afficherait non ?

non j'ai associé la classe à l'élément présent dans l'actioncolumn et non à une ou à toute sles colonnes

Citation:

Envoyé par Bruno13

De plus dans l'exemple que tu donnes sur les classes, peut on nommer 2 fois une classe avec un même nom? ou est-ce juste une faute de frappe ?

sorry
Code:

1 2 3 4 5 6 7 8 .maClasse{ background:url(une/icone.gif); height:16px; width:16px; } .maClasse:hover{ background:url(une/autre/icone.gif); }
A+JYT
10/11/2014, 17h07
Bruno13

Confirme moi une chose, avec cette méthode l'icône ne s'affiche QUE si l'on passe dessus la colonne ActionColumn ?

Voici mes contraintes:
- Si mon champ flag est défini (valeur >=0) alors j'affiche le css flag+valeur et l'icône reste constamment affiché
par ex. flag12, la class css est la suivante:

Code:

.flag12 { background-image:url('../icons/flag/12.png') !important; width:16px;height:16px; }

- Si mon champ flag n'est pas défini (valeur < 0) alors je n'affiche rien
-- Mais si je passe la souris sur la ligne correspondante (j'ai bien dit la ligne) alors cela affiche le css "flagnb", qui est en fait une icône invitant l'utilisateur à cliquer.

Code:

.flagnb { background-image:url('../icons/flag/flagnb.png') }
10/11/2014, 17h19
sekaijin

Citation:

Envoyé par Bruno13

Confirme moi une chose, avec cette méthode l'icône ne s'affiche QUE si l'on passe dessus la colonne ActionColumn ?

non elle ne s'affiche que si on passe sur l'item qui est dans l'actioncolumn
10/11/2014, 23h42
Bruno13

voilà c'est donc un de mes problèmes hélas...