Comment changer la position d'une info-bulle dans ExtJs 3.3

Question

Je veux changer la position d'une info-bulle pour l'afficher sur un bouton. J'ai essayé la méthode ci-dessous comme mentionné dans le forum d'ExtJs. Cela ne fonctionne pas, je ne peux pas remplacer la méthode getTargetXY, l'info-bulle s'affiche toujours dans la même position. Avez-vous une solution?

this.desktopButton = new Ext.Button({ 
    icon: "arrow_in.png", 
    scope: this, 
    handler: this.desktopButtonHandler, 
    tooltip: new Ext.ToolTip({ 
     text: 'Message', 
     getTargetXY: function() { 
      return [100, 100]; 
     } 
    }) 
}); 

Answer 1

Les éléments ext ne peuvent recevoir que les options de configuration indiquées dans la documentation; getTargetXY ne fait pas partie de ces options.

Si vous souhaitez remplacer cette méthode, vous avez deux choix:

• Remplacer tous Ext infobulles pour utiliser votre nouvelle fonction
• étendre la classe infobulle existante pour soutenir remplaçant cette méthode

Je ne recommanderais pas de surcharger la méthode, car cela pourrait avoir d'autres conséquences. Je vais cependant expliquer comment faire les deux.

Pour remplacer l'info-bulle:

Ext.override(Ext.Tooltip, { 
    getTargetXY: function() { 
     return [100, 100] 
    } 
}); 

Pour étendre l'info-bulle:

MyToolTip = Ext.Extend(Ext.Tooltip, { 
    constructor: function(config) { 
     var config = config || {}; 
     if (config.getTargetXY) { 
      this.getTargetXY = config.getTargetXY; 
     } 

     MyToolTip.superclass.constructor.call(this, config); 
    } 
}); 

Answer 2

Notez que la définition 'targetXY' peut se révéler inutile, comme Ext JS peut remplacer ce paramètre (selon la vue Taille). Le remplacement de la méthode "showAt" peut empêcher cela:

showAt:function() {  
    var xy = [this.getTargetXY()[0],this.getTargetXY()[1]-this.height] 
    MyTooltip.superclass.showAt.call(this, xy); 
}