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.