It's possible to know the field that holds the focus before button click?

Question

In a form, that have a couple of text items and a button, it's possible to know in which item the focus was before the click in the button?

I want to open another form, in a button click, and this form have a "context" that depends in the focus of the previous form.

Any thoughts?

EDIT

I tried to hold the last focused element in the controller, binding the blur event of all fields, but it seems that this event is not synchronized in IE (always he), Chrome and FF seems ok with that.

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    id: 'MyController',
    views: [
        'MyView'
    ],
    init : function(application){
        var me = this;

        me.lastFocus = null;

        me.control({
            '.field' : {
                blur: me.fieldBlur,
                scope: me
            }
        });
    },

    fieldBlur: function(field, event, opts) {
        this.lastFocus = field;
        //console.log('lastFocus: ' + field);
    }

});

Answer 1

I never tried it myself but Ext.FocusManager.focusedCmp looks promising. Note that you will need to activate it before you can use it by calling Ext.FocusManager.enable()

Edit

I thought it would be more stable by now. I am sorry to hear that it seams not to help you but I can not understand why the focusedCmp should be undefined on time you are clicking the button it should be the button. And with that I come to my error you need to access previousFocusedCmp.

But it should work cause what it does it no magic...

A little example JSFiddle:

Ext.FocusManager.enable();
Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            console.log('Most likely the button you clicked: ', Ext.FocusManager.focusedCmp, 'The Component that was focused before:  ',Ext.FocusManager.previousFocusedCmp );
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

How does the FocusManger do it in one sentence (we spare the keynav):

Well as soon as he get's enabled he queries the whole DOM for all focusable components and tell each of them to inform him about focus and blur changes.