Affichage tooltip grid

Version imprimable

Bonjour,

J'aimerais afficher une infobulle quand on survole une cellule de mon tableau.
Je suis sur sencha architect avec extjs 4.2.

Avec mon code, rien ne s'affiche au survol de ma case.

Merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
columns: [
{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        //metaData.attr='data-qtip="' + value + '"';
        metaData.attr='ext:qtip="' + value + '"';
        return value;
    },
    draggable: false,
    itemId: 'nomproduit',
    width: 'auto',
    defaultWidth: 200,
    dataIndex: 'nomproduit',
    hideable: false,
    tdCls: 'custom-column',
    text: 'Nom produit'
},

07/04/2016, 15h29
Chen norris

En passant à la version 4, il me semble qu'ExtJS a changé de fonctionnement pour les bulles d'aide et c'est désormais l'attribut data-qtip qu'il faut renseigner. Par ailleurs, il faut aussi bien penser à initialiser les bulles d'aides avec :

Code:

Ext.tip.QuickTipManager.init();

Sinon, je suis tombé sur une autre manière de faire, si elle t'intéresse : https://www.sencha.com/forum/showthr...d-cell-tooltip
08/04/2016, 11h34
neka11

Merci de se pencher sur mon problème.

J'utlise sencha architect donc je ne sais pas où placer l'initialisation.

J'ai utilisé aussi data-qtip ca ne marche pas plus :s
08/04/2016, 16h46
Chen norris

Aïe, ne connaissant pas Sencha Architect, je ne serai peut-être pas en mesure de t'aider beaucoup plus :(

Dans le doute, voici toujours un lien trouvé où est expliqué comment procéder dans Sencha Architect : http://stackoverflow.com/questions/2...ha-architect-3 (regarder le paragraphe "update"). En espérant que ça t'aidera un peu plus…

Bonjour,

Pour effectuer des tooltips dans un grid tu peux utiliser la fonction "renderer" (disponible dans Architect).
Code:

1 2 3 4 5 6 7 8 9 .... xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { metaData.tdAttr = 'data-qtip="' + value + '"'; return value; }, dataIndex: 'mon_data_index', text: 'Texte col', ....