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

[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