ExtJS 4: C'è un modo per allegare una QuickTip a un campo modulo?

Question

Sto tentando di aggiungere una QuickTip a un campo modulo, ma non riesco a trovare un modo per far funzionare il mio codice. In primo luogo, ho provato ad utilizzare un attributo qtip

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

e quindi utilizzando Ext.tip.ToolTip classe:

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

Ext.QuickTips.init(); 

Qui è un jsfiddle con il codice sorgente: jsfiddle

Answer 1

Sì, utilizzare la configurazione inputAttrTpl e l'attributo data-qtip:

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

Answer 2

ho trovato la risposta qui: 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

Utilizzando vero4ka's answer ho scritto un semplice plugin che può essere utilizzato con i moduli per consentire QuickTips sui campi del bambino.

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

Per ogni campo di modulo, è possibile utilizzare questo:

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

Answer 5

È anche possibile utilizzare il plugin di datatip built-in su un pannello formato. a pannello formato (vedi http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html):

in forma config:

plugins = [{ptype : 'datatip'}] 

nel campo di testo di configurazione:

tooltip : "my tooltip text" 

Answer 6

Se si sta generando tooltip dinamico quindi è possibile utilizzare sotto frammento:

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