PDA

View Full Version : ClearableTextField



demon222
8 Nov 2010, 12:31 PM
Someone asked about Text field with possibility to clear it's value.
Here is the code I use:



Ext.form.ClearableTextField = Ext.extend(Ext.form.TriggerField, {

enableKeyEvents: true,

initComponent: function() {
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
]};
Ext.form.ClearableTextField.superclass.initComponent.call(this);
this.on('keyup', this.checkTrigger, this);
},

checkTrigger: function() {
if (this.rendered) {
this.triggers[0][!Ext.isEmpty(this.getValue()) ? 'show': 'hide']();
}
},

onTrigger1Click : function()
{
this.setValue('');
this.fireEvent('cleared');
},

setValue : function(v){
Ext.form.ClearableTextField.superclass.setValue.call(this, v);
this.checkTrigger();
},

getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger2Click: Ext.form.TextField.prototype.onTriggerClick,
trigger1Class: Ext.form.TextField.prototype.triggerClass,
trigger2Class: Ext.form.TextField.prototype.triggerClass,
afterRender: Ext.form.TwinTriggerField.prototype.afterRender,
getTriggerWidth: Ext.form.TwinTriggerField.prototype.getTriggerWidth,
onDestroy: function(){
this.un('keyup', this.checkTrigger);
}
});
Ext.reg('ctextfield', Ext.form.ClearableTextField);


other link:

ClearableComboBox:
http://www.sencha.com/forum/showthread.php?106746-Clearable-Combobox&highlight=Clearable

ClearableDateField:
http://www.sencha.com/forum/showthread.php?106446-ClearableDateField&highlight=ClearableDateField

Paul999
14 Nov 2010, 8:00 AM
Awesome! It's very usefull! Thanks mate!