javascript 如何在文本字段后显示一个图标作为“帮助”以将值输入文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12198353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show an icon after textfield as a "Help" to enter the values into the textfield
提问by Srinivas B
I am using Extjs 4.1
我正在使用 Extjs 4.1
I have a form with some textfields.
我有一个带有一些文本字段的表单。
I want to show a help icon beside this textfield for allowing the user to enter the correct value, while the form is being displayed.
我想在此文本字段旁边显示一个帮助图标，以允许用户在显示表单时输入正确的值。
Can any body help me in solving this.
任何机构都可以帮助我解决这个问题。
采纳答案by AJJ
Try using Ext.form.TriggerField in place of text field.
尝试使用 Ext.form.TriggerField 代替文本字段。
Refer Extjs docs for reference http://extjs.cachefly.net/ext-3.4.0/docs/
请参阅 Extjs 文档以供参考http://extjs.cachefly.net/ext-3.4.0/docs/
For ExtJs 4.1:
对于 ExtJs 4.1：
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger
回答by Michal Levy
Simplest way imho is to place "help icon" at the end of label text using afterLabelTextTpl like this:
恕我直言，最简单的方法是使用 afterLabelTextTpl 在标签文本的末尾放置“帮助图标”，如下所示：
afterLabelTextTpl: '<img src="images/information.gif" class="info_image" data-qtip="your help text or even html comes here...."></img>'
Can be used with any field...
可用于任何领域...
回答by Christiaan Westerbeek
I've made a plugin that makes use of the afterLabelTextTplconfig of Ext.form.Labelablewhich is mixined to all kinds of fields like Combobox.
我做了一个插件，它使用的afterLabelTextTpl的配置Ext.form.Labelable，其mixined各种类似组合框字段。
Here's how to use it.
这是如何使用它。
{
xtype: 'textfield',
fieldLabel: 'Some field label',
name: 'name',
plugins:[{
ptype:'afterlabelinfo',
qtip:'The text appearing after hovering over the icon'
}]
}
Here's the plugin you need.
这是您需要的插件。
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('');
}
});
Here's some css that you need.
这是您需要的一些 css。
.x-ux-plugin-afterlabelinfo {
display: inline-block;
margin-left: 5px;
width: 12px;
height: 12px;
background-image: url(img/info-after.png) !important;
}
And the icon 
(right click and save as)
和图标（右键单击并另存为）
The result
结果
回答by fen1ksss
The best approach for me is to use Ext.tip.QuickTipView which can be easily added in afterrender event like this:
对我来说最好的方法是使用 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
https://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.tip.QuickTip
回答by AJJ
To add image to combo,
要将图像添加到组合，
use tpl property of the combo.
使用组合的 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"> '+
'{name}</div>';
return tpl;
}
}
});
