Discussion :

[Bruno13]

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 :

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
{ 
	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 :

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
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.

[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 :

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

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 :

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

src="resources/icons/pencil.png"

mais pour la 2ème j'ai :

Code :

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

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 :

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

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 :

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

1
2
TypeError: a.removeCls is not a function
a.removeCls('x-hide-display');

une idée ?

[Bruno13]

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

Code :

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

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 !

[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

[Bruno13]

Salut Sekaijin,

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

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 :

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

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

[Bruno13]

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 :

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

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 :

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

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 :

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

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 :

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

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

[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...

[sekaijin]

Salut Sekaijin,

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

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 :

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

.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

[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...

[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

[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.

[sekaijin]

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 :

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

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

Code css :

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

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

[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 ?

[sekaijin]

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

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 css :

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

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

[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 :

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

.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 :

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

.flagnb { background-image:url('../icons/flag/flagnb.png') }

[sekaijin]

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

[Bruno13]

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