ExtJS 4: Czy istnieje sposób na dołączenie QuickTip do pola formularza?

Question

Próbuję dodać QuickTip do pola formularza, ale nie mogę znaleźć sposobu, aby mój kod działał. Po pierwsze, próbowałem użyć atrybutu qtip

{ 
     fieldLabel: 'Last Name', 
     qtip:'This tip is not showing at all', 
     name: 'last' 
    } 

a następnie za Ext.tip.ToolTip Klasa:

Ext.create('Ext.tip.ToolTip', { 
    target: 'rating_field', 
    anchor: 'right', 
    trackMouse: true, 
    html: 'This tip is not showing at all' 
}); 

Ext.QuickTips.init(); 

Oto jsfiddle z kodem źródłowym: jsfiddle

Answer 1

Tak, użyj config inputAttrTpl i atrybut data-qtip:

{ 
    fieldLabel: 'Last Name', 
    inputAttrTpl: " data-qtip='This is my quick tip!' ", 
    name: 'last' 
} 

Answer 2

znalazłem odpowiedź tutaj: How should I add a tooltip to an ExtJS Component?

{ 
     fieldLabel: 'Last Name', 
     qtip: "This is a tip", 
     name: 'last', 
     listeners: { 
      render: function(c) { 
       Ext.QuickTips.register({ 
        target: c.getEl(), 
        text: c.qtip 
       }); 
      } 
     } 
    } 

Answer 3

Korzystanie vero4ka's answer Napisałem prosty plugin, który może być używany z form, aby umożliwić quicktips na polach potomnych.

Ext.define('Ext.form.QtipPlugin', { 
    extend: 'Ext.AbstractPlugin', 

    alias: 'plugin.qtipfields', 

    init: function (cmp) { 
     this.setCmp(cmp); 

     cmp.on('beforerender', function() { 

      var fields = cmp.query('field[qtip]'); 

      for (var i = 0; i < fields.length; i++) { 

       fields[i].on('render', this.register, this); 

      } 

     }, this); 
    }, 

    register: function (field) { 
     var obj = { 
      target: field.id 
     }; 

     if (typeof field.qtip === 'string') { 
      obj.text = field.qtip; 
     } else if (typeof field.qtip === 'object') { 
      // Allow qtip configuration objects. 
      // i.e. qtip: { text: 'hi', ... } 
      Ext.applyIf(obj, field.qtip); 
     } 

     Ext.tip.QuickTipManager.register(obj); 
    } 
}); 

Answer 4

Dla każdego pola formularza, można użyć to:

{ 
    xtype: 'textfield', // or anything else 
    autoEl: { 
     'data-qtip': 'This tip is not showing at all' 
    } 
} 

Answer 5

Można również użyć wbudowanego datatip wtyczki na panelu formularza. w panelu postaci (patrz http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html):

w postaci config:

plugins = [{ptype : 'datatip'}] 

w polu tekstowym config:

tooltip : "my tooltip text" 

Answer 6

Jeśli generowania podpowiedzi dynamicznie wówczas można skorzystać z poniższego fragmentu:

txtFieldName.el.set({ "data-qtip": Ext.String.htmlDecode("Some Text") });