Question

我正在使用Extjs 4.1

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

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

任何人都可以帮我解决这个问题。

Answer 1

最简单的方法imho是使用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

我制作了一个插件，它使用afterLabelTextTpl Ext.form.Labelable配置，它混合到各种类型的字段，如Combobox。

以下是如何使用它。

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

如何在textfield之后显示一个图标作为＆＃34;帮助＆＃34;将值输入文本字段

5 个答案: