buttonextjstextfieldextjs4.1

How to put X inside textfield to clear text in extjs


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

enter image description here


Solution

  • 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