How to show an icon after textfield as a "Help" to enter the values into the textfield

Question

I am using 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.

Solution 1

Try using Ext.form.TriggerField in place of text field.

Refer Extjs docs for reference http://extjs.cachefly.net/ext-3.4.0/docs/

For ExtJs 4.1:

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

Solution 2

Simplest way imho is to place "help icon" at the end of label text using afterLabelTextTpl like this:

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...

Solution 3

I've made a plugin that makes use of the afterLabelTextTpl config of Ext.form.Labelable which is mixined to all kinds of fields like Combobox.

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.

.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

Comments

[Dave]

Please work on your rep before telling other users they shouldn't ask more questions.

[Srinivas B]

Thanks for ur reply.I have tried using triggers.Works fine.But the problem is,i want to show a tooltip when i place the mouse over that icon.How can i configure a tool tip for this icon? My code for the trigger is as follows xtype: 'trigger', fieldLabel: 'Srinivas', triggerCls: 'trigger', width:190 The Cls is .x-form-trigger-wrap .trigger{background-image:url('delete.png');background-posit‌​ion:0 0;width:17px;height:21px;border-bottom:0px solid #b5b8c8;cursor:pointer;cursor:hand;overflow:hidden;backgroun‌​d-repeat: no-repeat} Can u please help me in placing a tool tip.

[AJJ]

Refer this link sencha.com/forum/showthread.php?66661-TriggerField-Icon-tool‌​tip

[Srinivas B]

@Jai Can i have an icon also beside the combo box ?

[AJJ]

yes you can.. use tpl property of the combo. countryCombo = Ext.create('Ext.form.field.ComboBox', { displayField : 'name', valueField : 'code', grow : true, store : countryStore, 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; } } });

[Michal Leszczyk]

TriggerField reports as deprecated in ExtJs 5: [W] Ext.form.field.Trigger is deprecated. Use Ext.form.field.Text instead.