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

Posted 2023-02-26

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

【英文标题】：How to show an icon after textfield as a "Help" to enter the values into the textfield

【发布时间】：2012-08-30 13:46:27

【问题描述】：

我正在使用 Extjs 4.1

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

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

谁能帮我解决这个问题。

【问题讨论】：

在告诉其他用户他们不应该问更多问题之前，请先处理好您的代表。

【参考方案1】：

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

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

可用于任何字段...

【参考方案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

【讨论】：

感谢您的回复。我尝试使用触发器。工作正常。但问题是，当我将鼠标放在该图标上时，我想显示一个工具提示。如何配置工具提示这个图标？我的触发器代码如下 xtype: 'trigger', fieldLabel: 'Srinivas', triggerCls: 'trigger', width:190 Cls 是 .x-form-trigger-wrap .triggerbackground-image:url('删除。你能帮我放置一个工具提示吗？

参考此链接sencha.com/forum/showthread.php?66661-TriggerField-Icon-tooltip

@Jai 我可以在组合框旁边也放一个图标吗？

是的，你可以..使用组合的 tpl 属性。 countryCombo = Ext.create('Ext.form.field.ComboBox', displayField : 'name', valueField : 'code', grow : true, store : countryStore, queryMode : 'local', listConfig: getInnerTpl: function( ) // 在这里你将图像放在你的组合中 var tpl = ''+ '  '+ ' name'; return tpl; );

TriggerField 报告在 ExtJs 5 中已弃用：[W] Ext.form.field.Trigger is deprecated. Use Ext.form.field.Text instead.

【参考方案3】：

我制作了一个使用Ext.form.Labelable 的afterLabelTextTpl 配置的插件，该配置混合到各种字段，如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;

还有图标（右键另存为）

结果

【参考方案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

【参考方案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;
        
    
);

【讨论】：

这将呈现在组合框列表中，这不是这里的问题。他要求在场本身背后。