extjs - मुझे एक्स्टजेस घटक में टूलटिप कैसे जोड़ना चाहिए?




tooltip (9)

मैं एक एक्स्टजेस घटक बना रहा हूं, और मैं इसे क्विकटिप्स टूलटिप का उपयोग करना चाहता हूं। यदि मैं 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
      }
    }
});

मुझे लगता है कि यह सही नहीं हो सकता है। मुझे लगता है कि मैं इसे स्वचालित रूप से करने के लिए घटक का विस्तार कर सकता हूं, लेकिन ऐसा लगता है कि मैं इस तरह के हुड के नीचे पोकिंग किए बिना ऐसा करने में सक्षम होना चाहिए।


Answers

मुझे लगता है कि आप इसे बिल्कुल सही कर रहे हैं। मुझे वास्तव में कंटेनरों में मनमाने ढंग से घटक में क्विकटिप्स की आवश्यकता नहीं दिखाई देती है, क्योंकि इससे उसी घटक के भीतर कई टूलटिप्स हो सकते हैं।


मानव संसाधन विकास मंत्री। मैंने देखा कि Ext.Button यह कैसे करता है, कॉन्फ़िगरेशन कॉलिंग setTooltip को हुड के नीचे 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
  });
});

मुझे लगता है कि यह Extjs 4 में सबसे अच्छा तरीका है:

आपको एक अंडरेंडर श्रोता जोड़ना चाहिए, फिर जब यार घटक पहले से ही बनाया गया है तो आप टूलटिप जोड़ सकते हैं, इस तरह:

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

मुझे उम्मीद है यह मदद करेगा।


इस तरह से सही काम करता है! कोशिश करो! (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
});

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

यह काम करना चाहिए :

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

सबसे सरल तरीका घटक के मुख्य तत्व पर 'डेटा-क्यूटीप' विशेषता सेट करना है:

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

एप्लिकेशन स्टार्टअप पर qtips सक्षम करने के लिए सुनिश्चित करें:

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

यह इतना आसान है कि आप खुद को लात मारेंगे ... बस एंटर दबाएं!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

फ़ायरफ़ॉक्स हालांकि बहु-लाइन टूलटिप्स प्रदर्शित नहीं करेगा - यह न्यूलाइन को कुछ भी नहीं बदलेगा।