How to put X inside textfield to clear text in extjs
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
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'
})
]
})
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.