1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    FG1 is on a distinguished road

      0  

    Default Detecting focus and blur

    Detecting focus and blur


    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.
    Code:
        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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have a look at

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

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    FG1 is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @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
    Code:
    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:

    Code:
     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
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


Thread Participants: 2

Tags for this Thread