extjs - 字段角中的问号工具提示图标

Question

如何在文本字段的一个角落显示一个小问号图标

1. 反应为按钮
2. 当我将鼠标悬停在它上面时显示一个工具提示
3. 可应用于所有领域

我不希望有人为我做所有的工作，但我不知道从哪里开始

编辑：这是它应该看起来的示例。

Answer 1

一种方法：创建一个组件FieldSet。我在这里给你举个例子：

Ext.define(MyApp.view.MyComponent', {
    extend: 'Ext.form.FieldSet',
    alias: 'widget.MyComponent',
    title: 'test',

    height: 100,
    margin: 0,
    padding: 0,
    width: 250,
    layout: {
        align: 'stretch',
        type: 'hbox'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    height: 71,
                    width: 78,
                    layout: {
                        type: 'fit'
                    },
                    items: [
                        {
                            xtype: 'image',
                            height: 81,
                            width: 120,
                            name: 'myImage'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});

所以，你需要让它可点击，在controller文件中render添加：

fieldSet.getEl().on('click', function (e) {
   //here show that you need
});

您可以在需要的地方添加此组件：xtype : MyComponent.

关于工具提示： 这里是如何使用它的信息

看看我的评论：我创建这样的视图：

Answer 2

您可以利用beforeBodyEl。添加到您的字段配置中，例如：

beforeBodyEl: '<div class="fieldTool"></div>'

CSS：

.fieldTool {
    position: absolute;
    right: 0;
    // presentation styling
}

然后，您可以将afterrender事件处理程序附加到可以找出 div 并设置工具提示、单击处理程序等的字段：

onAfterRender: function(field) {
    var toolTip = field.getEl().down('div.fieldTool');
    // add some life to toolTip here
}

Answer 3

通过简单地使用谷歌，我找到了这些例子：

示例 1 示例 2 示例 2

最简单的解决方案：

HTML

<input type="text"><input type="submit">

CSS

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 25px;
    width: 50px;
    background: blue;
    color: white;
    border: 0;
    -webkit-appearance: none;
}