web-dev-qa-db-ja.com

ExtJSコンポーネントにツールチップを追加するにはどうすればよいですか？

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を拡張してそれを自動的に行うこともできたと思いますが、このようにボンネットの下を突くことなく実行できるはずであるのは十分に一般的なケースのようです。

extjstooltip
26
Coderer

あなたは絶対に正しいことをしていると思います。同じコンポーネント内に複数のツールヒントが表示される可能性があるため、任意のコンポーネント、特にコンテナではQuickTipsの必要性が実際にありません。

9
user123444555621

動作するはずです：

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

ふむ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
  });
});
2
wombleton

これがExtjs 4の最良の方法だと思います：

アフターレンダーリスナーを追加する必要があります。yorcomponentenが既に作成されている場合は、次の方法でツールチップを追加できます。

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

役に立てば幸いです。

2
Javier Sanchez

最も簡単な方法は、コンポーネントのメイン要素に「data-qtip」属性を設定することです：

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

アプリケーションの起動時にqtipsを有効にしてください：

Ext.tip.QuickTipManager.init();
0
TheZver

この方法は完璧に機能します！それを試してみてください！ （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
});
0
Alex Dzeiko

私は常にExtJs 3でこの方法を使用します

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