How to fire onblur event on browse button of a filefield?

Question

If I click the textbox that comes with the file field and move the mouse away, onblur event is fired. How do i ensure the blur event is still fired when i click on the browse button and move the cursor away, without clicking the filefield textbox? my code snippet is below:

 {
                xtype: 'filefield',
                emptyText: 'Select file... (pdf, word, excel)',
                id: 'offer_file',
                name: 'offer_file',
                width: 400,
                buttonText: '',
                allowBlank: false,
                margins: '0 0 5 5',
                buttonConfig: {
                    iconCls: 'upload-icon'
                },
                listeners: {
                    blur: function(obj) {
                        console.log('Filefield Blurred');
                    }
                }

 }

Answer 1

Try the following approach, not the best but still works:

Ext.create('Ext.form.Panel', {
    title: 'Upload a Photo',
    width: 600,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        emptyText: 'Select file... (pdf, word, excel)',
        id: 'offer_file',
        name: 'offer_file',
        width: 400,
        buttonText: '',
        allowBlank: false,
        margins: '0 0 5 5',
        listeners: {
            render: function() {
                this.fileInputEl.on('blur', function() { 
                    Ext.Msg.alert('Alert', 'Filefield Blurred');
                });
            }
        }
    }]
});