IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

MVC - ActionColumn, getClass, itemmouseenter, itemmouseleave?


Sujet :

Ext JS / Sencha

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    624
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Mars 2005
    Messages : 624
    Par défaut MVC - ActionColumn, getClass, itemmouseenter, itemmouseleave?
    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.

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    624
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Mars 2005
    Messages : 624
    Par défaut
    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 ?

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    624
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Mars 2005
    Messages : 624
    Par défaut
    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 !

  4. #4
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    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

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    624
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Mars 2005
    Messages : 624
    Par défaut
    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; }

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    624
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Mars 2005
    Messages : 624
    Par défaut
    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

  7. #7
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    Citation Envoyé par Bruno13 Voir le message
    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

Discussions similaires

  1. Réponses: 4
    Dernier message: 24/02/2009, 12h06
  2. [débutant][Conception] Modélisation pour éviter le getClass()
    Par Oliveuh dans le forum Général Java
    Réponses: 9
    Dernier message: 28/06/2004, 20h00
  3. [MVC] Différences entre les framework MVC push et pull ?
    Par XavierZERO dans le forum Frameworks Web
    Réponses: 5
    Dernier message: 15/01/2004, 13h12
  4. Problème avec GetClass
    Par JerryMouse dans le forum Composants VCL
    Réponses: 4
    Dernier message: 17/10/2003, 19h03
  5. Classe abstraite / MVC
    Par caramel dans le forum MVC
    Réponses: 5
    Dernier message: 01/04/2003, 09h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo