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.
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.
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
});
}
});
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
}
}
});
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
});
});
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.
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();
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
});
Je l'utilise toujours dans ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}