如何将工具提示添加到 extjs6 中的文本表单字段答案

【问题标题】：How to add tooltip to text form field in extjs6如何将工具提示添加到 extjs6 中的文本表单字段
【发布时间】：2016-07-11 06:17:35
【问题描述】：

我有创建/渲染输入字段的功能，但我不知道如何在 EXTjs6 中添加工具提示

这是我的功能：

createInputField: function(value, fieldsMarginBottom, readonly) {
        var fieldStyle = this.getFieldStyle(readonly);
        var nameField = Ext.create('Ext.form.field.Text', {
            name: 'name',
            readOnly: true,
            hideLabel: true,
            value: value,
            width: this.fieldWidth,
            style: {
                marginBottom: fieldsMarginBottom + 'px'
            },
            //My try which is not working
            tooltip: {
                trackMouse: true,
                width: 140,
                renderer: function(tip, item){
                    tip.setTitle('name');
                    tip.update('Count: ');
                }
            },
            fieldStyle: fieldStyle
        });
        return nameField;
    }

我希望你们能帮助我。如果您需要任何其他信息，请告诉我，我会提供。谢谢

【问题讨论】：

您在docs 的哪个位置找到了tooltip 配置？
我没有。我在谷歌上搜索如何做，但似乎没有任何效果。你知道如何实现吗？

标签： javascript extjs extjs6

【解决方案1】：

从the textfield docs 可以看出，字段无法在其配置中添加工具提示，因此您必须手动创建工具提示。

如果您查看the docs for Ext.tip.ToolTip 是如何做到这一点的，您可能会发现一个小示例，您只需按照the target configuration description 更改目标：

var tip = Ext.create('Ext.tip.ToolTip', {
    target: nameField.getEl(),
    html: 'Press this button to clear the form'
});

【讨论】：

谢谢！这是我第一次使用 EXTJS，我不知道你可以这样引用目标

【解决方案2】：

以上答案是正确的。这是您编写一次并通过使用属性在项目中需要的任何地方使用的通用函数的示例。

addToolTip : function (id, msg) {
    new Ext.ToolTip({
            target : id,
            dismissDelay : 0,
            anchor : 'right',
            html : msg
        });
};

【讨论】：