ExtJS 4：有没有办法将QuickTip附加到表单字段上？

Question

我试图向表单字段添加一个快速提示（QuickTip），但无法找到使我的代码工作的方法。首先，我尝试使用qtip属性。

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

然后使用Ext.tip.ToolTip类：

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

- cansadadeserfeliz

Answer 1

是的，使用inputAttrTpl配置和data-qtip属性：

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

- Reimius

---

使用此方法，没有光学指示器显示表单字段提供快速提示。如果存在快速提示，是否有一种简单的方法添加图标？ - user2345998

我不认为有非常简单的方法，但您可以添加一些CSS来更改字段边框或使用适当的配置选项。 - Reimius

看起来相当难看。他们为什么不能只写“qTip:我的快速提示”...算了。 - Oliver Watkins

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

- cansadadeserfeliz

---

澄清一下，我想指出虽然这个方法有效，但这只是一个绕弯路来完成相同的事情。注册"Ext.QuickTips.register"所做的唯一事情就是向HTML添加"data-qtip"属性。使用这种方式的唯一真正原因是，如果您想要更轻松地转义动态创建的qtips中的html。 - Reimius

Answer 3

使用vero4ka的答案，我写了一个简单的插件，可以与表单一起使用，在子字段上启用快速提示。

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

- Will S

Answer 4

任何表单字段，您都可以使用以下方法：

{
    xtype: 'textfield', // or anything else
    autoEl: {
        'data-qtip': 'This is working tip!'
    }
}

- Steefler35

---

这段代码可将提示添加到单选组中的项目。{boxLabel: 'Flat Rate', name: 'rate_type', inputValue: 1, autoEl: {'data-qtip': '无论使用情况都采用一种费率。'}}, - Quixrick

Answer 5

您还可以在表单面板上使用内置的datatip插件。 在表单面板中（请参阅http://docs.sencha.com/extjs/6.5.1/classic/Ext.ux.DataTip.html）：

在表单配置中：

plugins = [{ptype : 'datatip'}]

在字段文本配置中：

tooltip : "my tooltip text"

- Arnaud Benhamdine

Answer 6

如果您正在动态生成工具提示，则可以使用以下代码片段：

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

- Nilay Mehta