Question

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

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

没有任何反应。我也试过命名属性“tooltip”，但没有运气。有没有正确的方法来做到这一点？我现在所做的黑客工作是

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

我觉得不能是正确的。我想我可以扩展Component来自动完成，但这似乎是一个很常见的情况，我应该能够做到这一点，而不是像这样在引擎盖下戳。

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

Answer 2

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

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

Answer 4

槽糕。我看了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
  });
});

Answer 5

我认为这是Extjs 4中的最佳方式：

你应该添加一个afterrender监听器，然后当你已经创建了yor 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
                    });
        }
    }
}

我希望它有所帮助。

Answer 6

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

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

Answer 7

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

Answer 8

最简单的方法是设置＆＃39; data-qtip＆＃39;组件主要元素的属性：

Ext.tip.QuickTipManager.init();

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

{{1}}

Answer 9

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

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

9 个答案: