Discussion :

[Bruno13]

Bonjour à tous,

J'ai un Tree qui contient 2 colonnes (Name, Action).

J'affiche une icône dans Action si il y a une action à faire.
Jusque là tout va bien.

J'ai voulu améliorer mon Tree en n'affichant l'icône QUE si la souris passe dessus.

Tout se passe très bien SAUF si la valeur de record.get('name') contient un espace.
Par exemple avec name = "snowboard" cela fonctionne, l'icône s'affiche sur le passage de la souris
mais avec name = "snowboard binding" cela ne fonctionne plus, je n'ai pas d'erreur, je rentre bien dans le bon IF
mais j'ai remarqué que mon cmp.elements est vide alors qu'il ne le devrait pas.

Voici mon listeners de mon Tree

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
....
        listeners: {
                /* NE FONCTIONNE PAS SI IL Y A UN ESPACE DANS LE NAME
                      PERMET D'AFFICHER ou PAS l'icone Add au passage de la souris */
                itemmouseenter: function( view, record, item, rowIndex, e, eOpts ) {
                    // show the icon
                    var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');
 
// Ici la console affiche bien le composant mais bizarrement pour les names contenant un espace
// alors que normalement il doit afficher:	
// object - elements
//	[img.x-action-col-icon.x-action-col-0.x-hide-display resources.../add.png]
console.log(cmp);
 
// Ci-dessous, je rentre bien dans le bon IF mais cela n'a aucun effet.
                    cmp.removeCls('x-hide-display');
                    if (record.data.leaf || (record.get('name')==='Temporary') || (record.get('name')==='Trash')) {
                        cmp.addCls('x-hide-display');
                    } else
                    {
                        cmp.addCls('x-grid-center-icon');
                    }                                                    
                },
 
                itemmouseleave: function( view, record, item, rowIndex, e, eOpts ) {
                    // hide the icon
                    var cmp = Ext.select('#' + Ext.get(item).id + ' img.x-action-col-icon');                                              
                    cmp.removeCls('x-grid-center-icon');
                    cmp.addCls('x-hide-display');        
                }
        }
    },
 
    columns: [{
                xtype       : 'treecolumn', //this is so we know which column will show the tree
                text        : 'Name',
                itemId      : 'itemtreefolder',
                flex        : 1,
                sortable    : true,
                dataIndex   : 'name'
            }, 
            {
                width           : 40,
                xtype           : 'actioncolumn',
                itemId          : 'btnaddsubfolder',
                tooltip         : 'Create sub-folder',
                align           : 'center',
                icon            : 'resources/icons/add.png',
 
                getClass: function(v, meta, record) {          
                        return 'x-hide-display';
                }
            }
    ],

[sekaijin]

je ne comprends pas du tout pourquoi tous ce code

lorsque tu crée ton noeud tu peux lui mettre un attribut cls
qui est une class css
pourquoi ne pas simplement
utiliser cette class avec les attribut css mouseover
pour afficher l'icône

ça ne demande rien de plus.

A+JYT

[Bruno13]

Salut Sekaijin,

Je t'avoue que c'est tout simplement parce que c'est un bout de code qui me semblait simple à comprendre, mais aussi
parce que je n'ai pas du tout pensé à la méthode dont tu parles. D'ailleurs, je ne l'ai pas tout à fait comprise mais bon
je ne sais pas pourquoi, maintenant cela fonctionne parfaitement.

Je ne sais pas ce que j'ai fait en plus ou en moins mais là tout fonctionne parfaitement et sans changer la moindre ligne de code de l'exemple ci-dessus... ?!