Question

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

作为按钮做出反应
上时，
显示工具提示
可以应用于所有字段

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

编辑：以下是它应该显示的示例。

enter image description here

Answer 1

您可以利用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 2

一种方法：创建一个组件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

您可以在需要的地方添加此组件：{{1}}。

关于工具提示：here's information how to work with it

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

with containers

Answer 3

通过简单的使用谷歌我发现了这些例子：

Example1 Example2 Example2

和最简单的解决方案：

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

在字段角落的问号工具提示图标

3 个答案: