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




tooltip (6)

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

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


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

इस तरह से सही काम करता है! कोशिश करो! (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 में सबसे अच्छा तरीका है:

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

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