Comment ajouter une info-bulle à un composant ExtJS?
Je fais un composant ExtJS, et je veux qu'il utilise une info-bulle QuickTips. Si je fais un élément en utilisant DomHelper, je peux définir une info-bulle, pas de problème. Si, cependant, je fais un composant, comme
new BoxComponent({
qtip: "This is a tip"
});
Rien ne se passe. J'ai également essayé de nommer la propriété "tooltip", mais pas de chance. Est-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
}
}
});
J'ai l'impression que ne peut pas - être raison. Je suppose que je pourrais simplement étendre le composant pour le faire automatiquement, mais il semble être un cas assez commun que je devrais être capable de le faire sans piquer sous le capot comme ça.
9 réponses
Je pense que vous le faites tout à fait correctement. Je ne vois vraiment pas le besoin de QuickTips dans les composants arbitraires, en particulier dans les conteneurs, car cela pourrait conduire à plusieurs info-bulles dans le même composant.
Dans ExtJS 4.2.1, je suis capable d'ajouter une astuce à une case à cocher de cette façon:
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 fonctionner:
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
}
}
});
Gestion des ressources humaines. J'ai regardé comment Ext.Button le fait, en passant tooltip à l'appel de configurationsetTooltip 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 la meilleure façon dans Extjs 4:
Vous devez ajouter un écouteur afterrender, puis lorsque yor componenten 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.
J'utilise toujours cette façon dans ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}
Cette façon fonctionne parfaitement! L'essayer! (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
});
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();
{
xtype: 'checkbox',
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
}
}