web-dev-qa-db-fra.com

Comment dois-je ajouter une info-bulle à un composant ExtJS?

Je crée un composant ExtJS et je veux qu'il utilise une info-bulle QuickTips. Si je crée un élément avec DomHelper, je peux définir une info-bulle, pas de sueur. Si, toutefois, je crée un composant, comme

new BoxComponent({
  qtip: "This is a tip"
});

rien ne se passe. J'ai aussi essayé de nommer la propriété "info-bulle", mais pas de chance. Y a-t-il une bonne façon de faire cela? Le hack que j'ai en place maintenant qui fonctionne est

new BoxComponent({
  qtip: "This is a tip",
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});

Je me sens comme ça ne peut pas avoir raison. Je suppose que je pourrais simplement étendre Component pour le faire automatiquement, mais cela me semble être un cas assez courant pour que je puisse le faire sans fouiller sous le capot.

extjstooltip
26
Coderer

Je pense que vous le faites absolument bien. Je ne vois vraiment pas la nécessité d'utiliser des info-bulles dans des composants arbitraires, en particulier dans des conteneurs, car cela pourrait donner lieu à plusieurs info-bulles dans le même composant.

9
user123444555621

Dans ExtJS 4.2.1, je peux ajouter un conseil à une case à cocher de la manière suivante:

new Ext.form.field.Checkbox({
  ...
  tip: 'This is a tip',
  listeners: {
    render: function(c) {
      Ext.create('Ext.tip.ToolTip', {
        target: c.getEl(),
        html: c.tip 
      });
    }
  });
19
DSoa

Cela devrait marcher:

new BoxComponent({
 tooltip: new Ext.ToolTip({
        title: 'Example Tooltip title',
            text: 'Example Tooltip text'

    }),
  listeners: {
    rendered: function(c){
      Ext.QuickTips.register({
        target: c.getEl(),
        text: c.qtip
      }
    }
});
3
Deniz Toprak

Hrm. J'ai jeté un coup d'œil à la façon dont Ext.Button le fait, avec tooltip passé à la configuration appelant setTooltip sous le capot.

Non testé, mais je pense que votre meilleur pari est quelque chose comme:

Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
  onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
    // setTooltip code adapted from Ext.Button, looking at tooltip property
  });
});
2
wombleton

Je pense que c'est le meilleur moyen dans Extjs 4:

vous devez ajouter un écouteur afterrender, puis, lorsque votre composant est déjà créé, vous pouvez ajouter l'info-bulle de cette façon

listeners : {
    afterrender : function(obj) {
        if (this.max != null && this.ave != null && this.min != null) {
            obj.tip = Ext.create('Ext.tip.ToolTip', {
                        target : obj.getEl().getAttribute("id"),
                        trackMouse : true,
                        renderTo : document.body,
                        html : this.htmlTip,
                        title : this.title
                    });
        }
    }
}

J'espère que ça aide.

2
Javier Sanchez

Le moyen le plus simple est de définir l'attribut 'data-qtip' sur l'élément principal du composant:

{
    xtype: 'box',
    autoEl: {
        'data-qtip': "Tooltip text"
    }
}

Assurez-vous d'activer qtips au démarrage de l'application:

Ext.tip.QuickTipManager.init();
0
TheZver

Cette façon fonctionne parfaitement! Essayez le! (Extjs 4.2)

var boxComponent = Ext.create('Ext.Component', {
  id: 'id111',
  html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
  width: 20,
  height: 20,
  margin: '0 0 0 10'
});

Ext.tip.QuickTipManager.init();

Ext.tip.QuickTipManager.register({
  target: 'id111',
  title: 'My Tooltip',
  text: 'This tooltip was added in code',
  width: 100,
  dismissDelay: 10000 // Hide after 10 seconds hover
});
0
Alex Dzeiko

Je l'utilise toujours dans ExtJs 3 

listeners: {
    render: function(c) {
        Ext.QuickTips.register({
            target: c,
            text: 'Enter \'-1\' for a 1 time only'
        });
    }
}
0
Mohammad AlQanneh