keypress to delete value in 'open' datefield and close related datepicker

Question

I have an ExtJS form.field.Date as below;

{
    xtype: 'datefield',
    name: 'X_Cut_Process_Completed_Date',
    format: 'd M Y',
    startDay: 1,
    allowBlank: true,
    editable: false,
    listeners: {
        specialkey: function(field, e){
            if (e.getKey() == e.DELETE) {
                field.setValue('');
            }
        }
    }
}

I have been asked to implement an event that catches the Delete key while the datefield is being edited (with the associated datepicker open), that clears the value for the datefield and closes the datepicker. The existing specialkey listener only clears the value while the datefield is NOT being edited.

How do I implement a listener that closes a datefield's datepicker and clear the datefield's value simultaneously?

Answer 1

[UPDATE]

You can get the picker and hide it:

field.getPicker().hide()

I have tested it and it works. To test it for yoursef:

1. navigate to http://extjs.eu/software/form-field-icon-plugin/

2. in console type:

   Ext.ComponentQuery.query('datefield')[0].on('specialkey', function(field, e){
   if(e.getKey() === e.DELETE) {
       field.getPicker().hide();
       field.setValue('');
   }
   

   });

Now open the picker in the date field, type something and press delete. Both the field is cleared and the picker is hidden.