ExtJS 4: Есть ли способ привязать QuickTip к полю формы?

Я пытаюсь добавить QuickTip в поле формы, но не могу найти способ заставить мой код работать. Во-первых, я попытался использовать атрибут qtip

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

а затем с помощью Ext.tip.ToolTip class:

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

Ext.QuickTips.init();

Вот jsfiddle с исходным кодом: jsfiddle

Ответы

Ответ 1

Да, используйте конфигурацию inputAttrTpl и атрибут data-qtip:

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

Ответ 2

Я нашел ответ здесь: Как добавить всплывающую подсказку к компоненту ExtJS?

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

Ответ 3

Используя vero4ka answer Я написал простой плагин, который можно использовать с формами, чтобы включить быстрые подсказки по дочерним полям.

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

Ответ 4

Для любого поля формы вы можете использовать это:

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

Ответ 5

Вы также можете использовать встроенный тип данных плагинов на панели форм. в панели формы (см. http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html):

в форме config:

plugins = [{ptype : 'datatip'}]

в текстовом файле:

tooltip : "my tooltip text"

Ответ 6

Если вы генерируете всплывающую подсказку динамически, вы можете использовать ниже фрагмент:

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