PDA

View Full Version : [SOLVED]File TextField - validation event issue



Crisps
10 Jun 2010, 7:59 AM
I have a file text field defined as follows



this.field_data = new Ext.form.TextField({renderTo: 'datafile',
name: 'uploadedfile',
allowBlank: false,
invalidClass: '',
inputType: 'file',
width: 75
});

this.field_data.on('valid', this.on_data_valid, this);
this.field_data.on('invalid', this.on_data_invalid, this);



I need to fire a handler, when the value of the edit box is changed. This needs to be immediately, before the blur.

This all works fine on a normal TextField because you are usually typing into the box, so the keyup/down/press events can be used to fire off validation etc. However with a file input box the user always uses the mouse to select the file they want so the handler never gets fired until the focus is lost and I need the handler to act before this point.

The 'change' event has exactly the same problem of having to wait until after the blur.

Does anyone know how to get around this problem?

Thanks

Crisps
10 Jun 2010, 8:31 AM
I have managed to solve my own problem here :-)

When the field dialog opens the selection window it loses focus because it is modal. When you dismiss the selection dialog for any reason then you refocus the text window. You can then use this event to perform the validation.




this.field_data = new Ext.form.TextField({renderTo: 'datafile-',
name: 'uploadedfile',
allowBlank: false,
invalidClass: '',
inputType: 'file',
width: 75
});

this.field_data.on('valid', this.on_data_valid, this);
this.field_data.on('invalid', this.on_data_invalid, this);
this.field_data.on('focus', this.on_data_focus, this);
},

on_data_valid: function(field)
{
//do stuff on valid
},

on_data_invalid: function(field)
{
//do stuff on invalid
},

on_data_focus: function(field)
{
this.field_data.validate.bind(this.field_data).defer(100);
},



The focus handler is called before the file name is copied from the selection dialog. Because of this we must defer the validation slightly. I am using the prototype adapter for bind and defer, there should be something similar in ExtJS proper too though.

This works fine in both Firefox 3.5 and IE 8, hopefully it will work with all browers.

I hope this helps others who are stuck with the same issue.