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

Question

我正在制作一个ExtJS组件，并希望它使用QuickTips工具提示。如果我使用DomHelper创建一个元素，我可以轻松地设置工具提示。然而，如果我创建一个组件，比如：

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

什么也没有发生。我还尝试将属性命名为“tooltip”，但没有成功。有正确的方法吗？目前我使用的hack方法是：

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

我感觉这样做不太对。 我想我可以扩展组件来自动完成这个任务，但这似乎是一个很常见的用例，我应该能够不用像这样探究内部就能实现它。

- Coderer

---

请注意，事件名为'afterrender'而不是'rendered'。 - Rijk

Answer 1

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

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

- DSoa

Answer 2

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

- user123444555621

---

好的，我对这一切都很陌生。我只是勉强理解“组件”和“元素”的区别（组件有一个元素，对吧？）。我想做的是，在我的页面上制作一个东西，它具有a）工具提示和b）单击处理程序。我希望能够用大约两行代码来实现这个目标 - 我的要求是否不合理？ - Coderer

组件是其他框架所称的小部件，由嵌套的元素（基本上是DOM节点的包装器）组成。如果您经常需要带有工具提示的组件，则可以考虑创建一个插件，这样您就可以很简单地使用 plugins：[ComponentQickTipPlugin]，qtip：“这是提示” - 这只需要两行代码 ;) - user123444555621

听起来很不幸，简短的回答是“是的，这应该更容易，但事实并非如此。” :( - Coderer

我需要为每个组件的工具提示添加8行代码吗？ - Oliver Watkins

@OliverWatkins 是的 :/ 或者使用您定制的版本覆盖 Ext.component，该版本包括对工具提示的支持。 - FuriousFolder

Answer 3

它应该可以工作：

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

- Deniz

---

这在AEM中对我很有帮助。 CQ.Ext.QuickTips.init(); new CQ.Ext.form.Checkbox({ title:'xyz', text:'abc', listeners: { render: function(c) { CQ.Ext.QuickTips.register({ target: c, title: c.title, text: c.text, width: 200, dismissDelay: 10000 }); } } }); - Dileepa

Answer 4

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

您应该添加一个 afterrender 监听器，然后当您的组件已经创建时，您可以添加提示，如下所示:

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

我希望这能有所帮助。

- Javier Sanchez

Answer 5

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

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

请确保在应用程序启动时启用qtips：

Ext.tip.QuickTipManager.init();

- TheZver

Answer 6

嗯，我看了一下Ext.Button的实现方式，它通过将tooltip传递给配置调用setTooltip来完成。

虽然没有经过测试，但我认为你最好的选择是类似于以下的代码：

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

- wombleton

Answer 7

我总是在ExtJs 3中使用这种方式

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

- Mohammad AlQanneh

Answer 8

{
    xtype: 'checkbox',
    fieldLabel: 'Test Label',
    name: 'data_field',
    autoEl: {
        tag: 'div',
        'data-qtip': 'This is a tip'
    }
}

- VasyaM

---

在使用'data-qtip'属性时，我遇到了“未捕获的SyntaxError：意外的令牌' - '”错误。 - Sashikanta

Answer 9

这种方法非常完美！试试吧！（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
});

- Alex Dzeiko

Answer 10

{
    xtype: 'checkbox',
    tip: 'This is a tip',
    listeners: {
        render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: c.tip
            });
        }
    }
}

- Filipizaum

---

请解释你的答案。 - Gwenc37