如何向ExtJS组件添加工具提示？

我正在制作一个ExtJS组件，我希望它使用QuickTips工具提示。如果我使用DomHelper创建一个元素，我可以设置一个工具提示。但是，如果我制作一个组件，比如

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

什么也没发生。我还尝试将属性命名为“工具提示”，但没有成功。有没有正确的方法？我现在所采用的方法是

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

---

我觉得那不可能是对的。我想我可以直接扩展组件来自动完成这项工作，但这似乎是一个很常见的情况，我应该能够做到这一点，而不必像这样戳引擎盖。我查看了

Ext.Button

是如何操作的，并将

tooltip

传递给引擎盖下的配置调用

未经测试，但我认为你最好的选择是：

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
  });
});

---

我认为你做得绝对正确。我真的不认为在任意组件中需要QuickTips，特别是在容器中，因为这可能会导致在同一组件中出现多个工具提示。

它应该可以工作：

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
      }
    }
});

---

我认为这是Extjs 4中最好的方法：

您应该添加afterrender侦听器，然后当您的componenten已创建时，您可以通过以下方式添加工具提示：

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
                    });
        }
    }
}

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 
      });
    }
  });

---

我希望它能有所帮助。

我在ExtJS3中总是使用这种方式

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

---

在ExtJS 4.2.1中，我可以通过以下方式向复选框添加提示：

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
                    });
        }
    }
}

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 
      });
    }
  });

---

这种方法很好用！试试看！（Extjs 4.2）

var-boxComponent=Ext.create（'Ext.Component'{
id:'id111'，
html:“”，
宽度：20，
身高：20，
边距：“010”
});
Ext.tip.QuickTipManager.init（）；
Ext.tip.QuickTipManager.register({
目标：“id111”，
标题：“我的工具提示”，
文本：“此工具提示已添加到代码中”，
宽度：100，
dismissDelay:10000//10秒后隐藏悬停
});

最简单的方法是在组件的主元素上设置“数据qtip”属性：

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

确保在应用程序启动时启用QTIP：

Ext.tip.QuickTipManager.init();

---

好吧，我对这一切都不熟悉。我只是勉强理解“组件”和“元素”之间的区别（一个组件有一个元素，对吗？）。我想做的是，在我的页面上做一个东西，它有a）一个工具提示，和b）一个点击处理程序。我想用大约两行代码就可以做到这一点——我不合理吗？组件就是其他框架所称的小部件，由嵌套元素（基本上是DOM节点的包装器）组成。如果你需要经常使用工具提示的组件，你可能想考虑创建一个插件，这样你就可以很简单地使用插件：[CopyToQuiTipPuxIn ]，QTip：“这是一个提示”——这是两条线；不幸的是，这听起来像是“是的，这应该更容易，而不是。”（因此，我必须为我的组件上的每个工具提示添加8行代码？@OliverWatkins Yep:/Or使用自定义版本覆盖Ext.component，其中包括对工具提示的支持。请注意，该事件称为“afterrender”，而不是“rendered”。请解释您的回答这在AEM中对我有帮助。

CQ.Ext.QuickTips.init（）；new CQ.Ext.form.Checkbox。）({标题：'xyz'，文本：'abc'，侦听器：{呈现：函数（c）{CQ.Ext.QuickTips.register({target:c，title:c.title，text:c.text，宽度：200，dismissDelay:10000}）；}}}}）；