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

    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,263
    Vote Rating
    486
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,964
    Vote Rating
    11
    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