Detecting focus and blur

[FG1]

Hi All

I'm very new to ExtJs, so apologies if this is a dumb question. I have googled it and can't find a satisfactory answer so here I am.

I want to detect what item in a form has the focus just before a button on the form is pressed, this will affect the way the app behaves when the button is pressed.

I've been looking at a listener to do this, as I can't find a property that holds the current or previous focus.

    var testForm = Ext.create('Ext.form.Panel', {
        width: 500,
        renderTo: Ext.getBody(),
        title: 'testForm',
        //...
        listeners: {
        click: {  //works fine
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        mouseover: {  //works fine
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('mouseover el'); }
        },
        blur: {  //doesn't work
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('blur el'); }
        },
        focus: {  //doesn't work
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('focus el'); }
        },
        dblclick: { //works fine
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    //....
    });

The idea is taken directly from the Ext.form.Panel doc and the comments suggest that this technique should work for other events, such as focus. I'm sure I'm missing something obvious, I just can't figure out what.

Thanks in advance for any help.

FG

[scottmartin]

Have a look at

Ext.FocusManager :: focusedCmp
http://docs.sencha.com/ext-js/4-1/#!...rty-focusedCmp

Regards,
Scott.

[FG1]

Thanks for the link Scott, very useful. But I'm afraid I need a bit more help.

In the panel, where do I fire the

Ext.FocusManager.enable();

message? I've tried various listeners and can't get the syntax to work for a Panel.

Once this is done, what is the best way to pick up the component with the focus once the button is pressed?

I'm sure these things will drop into place once I am more familiary with ExtJs, in the meatime thank you for your patience.

FG

[hendricd]

@FG1 --

Here is a simple Controller class you can use to:

• work out the timing kinks
• get a useful reference to the field that HAD focus

Ext.define('MyApp.controller.Playpen', {     
     extend: 'Ext.app.Controller',   
     refs : [
          { ref : 'testForm', selector : 'form[controlledForTesting]' }
     ],  
     init: function() {         
           this.control({            
               'form[controlledForTesting] button[action=submit]': {                 
                   click: this.onSubmit,
                   buffer : 250            //<-- Adjust as necessary
               } ,
               'form[controlledForTesting] field' : {
                    blur  : this.onFieldEffects,
                    focus  : this.onFieldEffects
               }        
            });     
      },      
      onSubmit: function( button ) {
          var lastField = button.lastField; 
           //Go nuts !
              
      },
      onFieldEffects : function(field) {
           this.testForm.down(  'button[action=submit]' ).lastField = field;
      }
 });

and simplify your Form:

 var testForm = Ext.create('Ext.form.Panel', {         
       width: 500,
        controlledForTesting : true,         
        renderTo: Ext.getBody(),         
        title: 'testForm',
        items : [],   //your fields
        buttons: [   { text: 'Submit', action : 'submit' } ]
});

Wrap that (or equivalent) up into an Ext.application Controller and tweak