javascript - 如何在文本字段之后显示一个图标作为“帮助”以将值输入到文本字段中

Question

我正在使用 Extjs 4.1

我有一个带有一些文本字段的表单。

我想在此文本字段旁边显示一个帮助图标，以允许用户在显示表单时输入正确的值。

任何机构都可以帮助我解决这个问题。

Answer 1

恕我直言，最简单的方法是使用 afterLabelTextTpl 将“帮助图标”放在标签文本的末尾，如下所示：

afterLabelTextTpl: '<img src="images/information.gif" class="info_image" data-qtip="your help text or even html comes here...."></img>'

可用于任何领域...

Answer 2

尝试使用 Ext.form.TriggerField 代替文本字段。

请参阅 Extjs 文档以获取参考http://extjs.cachefly.net/ext-3.4.0/docs/

对于 ExtJs 4.1：

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger

Answer 3

我制作了一个插件，该插件使用了与 Combobox 等各种字段混合的afterLabelTextTpl配置。Ext.form.Labelable

以下是如何使用它。

{
    xtype: 'textfield',
    fieldLabel: 'Some field label',
    name: 'name',
    plugins:[{
        ptype:'afterlabelinfo',
        qtip:'The text appearing after hovering over the icon'
    }]
}

这是您需要的插件。

Ext.define('Ext.ux.plugin.AfterLabelInfo', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.afterlabelinfo',

    init: function (cmp) {
        var me = this; // the plugin

        cmp.afterLabelTextTpl = [
            '<span',
            ' class="x-ux-plugin-afterlabelinfo"',
            ' data-qtip="',
            Ext.util.Format.htmlEncode(me.qtip || ''),
            '">',
            '</span>'
        ].join('');
    }
});

这是您需要的一些CSS。

.x-ux-plugin-afterlabelinfo {
    display: inline-block;
    margin-left: 5px;
    width: 12px;
    height: 12px;
    background-image: url(img/info-after.png) !important;
}

和图标（右键单击并另存为）

结果

Answer 4

对我来说最好的方法是使用 Ext.tip.QuickTipView 可以很容易地添加到 afterrender 事件中，如下所示：

afterrender: function(me) {
  // Register the new tip with an element's ID
  Ext.tip.QuickTipManager.register({
     target: me.getId(), // Target button's ID
     text  : 'My Button has a QuickTip' // Tip content  
  });
}

https://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.tip.QuickTip

Answer 5

要将图像添加到组合，

使用组合的 tpl 属性。

 Combo = Ext.create('Ext.form.field.ComboBox', {
    displayField : 'name',
    valueField   : 'code',
    grow         : true,
    store        : store,
    queryMode    : 'local',
    listConfig: {
        getInnerTpl: function() {
            // here you place the images in your combo
            var tpl = '<div>'+
                      '<img src="images/flags/{iso2}.png" align="left">&nbsp;&nbsp;'+
                      '{name}</div>';
            return tpl;
        }
    }
});