How to put X inside textfield to clear text in extjs

Question

I want to implement an X button inside a textfield (x on right side of textfield) to clear entered texts. I have seen many extjs application that has this feature. How do I go about doing that? Any suggestion or comments would be really appreciated... THanks

it looks something like this...

Solution 1

You have to use a Ext.form.field.Trigger. Here is a example for that

Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',
    initComponent: function () {
        var me = this;

        me.triggerCls = 'x-form-clear-trigger'; // native ExtJS class & icon

        me.callParent(arguments);
    },
    // override onTriggerClick
    onTriggerClick: function() {
        this.setRawValue('');
    }
});

Ext.create('Ext.form.FormPanel', {
    title: 'Form with TriggerField',
    bodyPadding: 5,
    width: 350,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'customtrigger',
        fieldLabel: 'Sample Trigger',
        emptyText: 'click the trigger'
    }]
});

For ease of testing, here is a JSFiddle

Solution 2

This is what works for me with the CSS:

CSS

    .x-form-clear {
        background-image: url('../../resources/themes/images/default/form/clear-trigger.gif');
        background-position: 0 0;
        width: 17px;
        height: 22px;
        border-bottom: 1px solid #b5b8c8;
        cursor: pointer;
        cursor: hand;
        overflow: hidden;
    }

    .x-form-clear-over {
        background-position: -17px 0;
        border-bottom-color: #7eadd9;
    }

    .x-form-clear-click {
        background-position: -68px 0;
        border-bottom-color: #737b8c;
    }

Class

Ext.define('Ext.ux.form.field.Clear', {
    extend: 'Ext.form.field.Trigger',

    alias: 'widget.clearfield',

    triggerBaseCls: 'x-form-clear',

    onTriggerClick: function() {
        this.setValue();
    }
});

Usage

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        Ext.create('Ext.ux.form.field.Clear', {
            fieldLabel: 'Clear Field',
            cls: 'clear-trigger'
        })
    ]
})

Solution 3

Or use this 'clearbutton' plugin: http://www.eekboom.de/ClearButton.html

I like it because it's just a plugin, one line, instead of requiring a custom subclass.

Also, it can be used on all kinds of fields, not just on a textfield.

Solution 4

In ExtJS 6+, you can also just add the following 2 configs on your Ext.form.field.Text and show/hide the trigger with the built-in change listener

triggers: {
    clearText: {
        cls: 'clear-text-trigger-icon',
        handler: function() {
            this.setValue('');
        }
    }
},
listeners: {
    change: function(textField) {
        if (textField.getValue()) {
            textField.setHideTrigger(false);
        } else {
            textField.setHideTrigger(true);
        }
    }
}

Solution 5

You can use the Ext.form.field.Text with triggers in Extjs 5.0 and later, no need to define a new type.

var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        }
   }
});

The scope of the trigger's handler is the Ext.form.field.Text component.

You can have multiple triggers, and can also use MVVM model. For example:

var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        },
        search: {
            cls: 'x-form-search-trigger',
            handler: 'onSearch'
        }
   }
});

The search trigger uses a handler function, i.e. onSearch, that is defined in the controller of the component that has the Ext.form.field.Text object.

View more solutions

Comments

[EagleFox]

Sweet. Thanks sra... this is exactly what I need... Do I need to define the cls that u have used here

[sra]

@EagleFox Yes you do. Otherwise it will look like a combo. But the Icon and class are ExtJS default. So nothing else need to be done

[mwhs]

note: in later ExtJS versions (i.e. 4.2) the class postfix is now form-clear-trigger.

[PhoonOne]

So it shows up on the right side, how do i move it to the left side? Using ext 5.1 @sra

[jbarrameda]

Note that the class Trigger has been deprecated: As of Ext JS 5.0 this class has been deprecated. It is recommended to use a Ext.form.field.Text with the triggers config instead. link