CODEWITHSUNDEEP
extjsextjs4
Beetlejuice
Beetlejuice

Reputation: 4425

Extjs modal windows focusing back controls

I show a modal window with some input controls. When I press "tab" key it navigates through the controls.

If I continue pressing "tab", in some moment it focus the controls behind this windows, and I can even type in this controls.

I'm using ExtJs 4.1

thanks.

Upvotes: 7

Views: 2750

Answers (2)

Indrajit Das
Indrajit Das

Reputation: 96

Done some workaround, working for me , check this out and please let me know.

/* ***For activation of Tab Key only to the active panel****/


Ext.EventManager.on(Ext.getBody(), 'keydown', focusListenerLogin, Ext.getBody());
Ext.EventManager.on(Ext.getBody(), 'keyup', focusListenerLogin, Ext.getBody());
Ext.EventManager.on(Ext.getBody(), 'keypress', focusListenerLogin, Ext.getBody());
Ext.EventManager.on(Ext.getBody(), 'focusin', focusListenerLogin, Ext.getBody());


/***Here the Function is defined.***/

function focusListenerLogin(e) {

if(typeof Ext.WindowManager.getActive() !== 'undefined' && Ext.WindowManager.getActive() !== null) {
    var activeWinId = Ext.WindowManager.getActive().getId ();
    var obj = Ext.getCmp(activeWinId);
    var id = typeof obj.focusEl !=='undefined' ? obj.focusEl.id : obj.id;
    window.prevFocus;


    var dom = activeWinId;
    var components = [];
    Ext.Array.each(Ext.get(dom).query('*'), function(dom) {
      var cmp = Ext.getCmp(dom.id);
      if(cmp && cmp.isVisible()) {
      if (cmp && cmp.btnEl && cmp.btnEl.focusable())
        components.push(cmp.btnEl);
      else if(cmp && cmp.inputEl && cmp.inputEl.focusable())
        components.push(cmp.inputEl);
      }
    });


    if (typeof obj != 'undefined' && obj.isVisible() && obj.el.id === activeWinId && (typeof e.keyCode!== 'undefined' ? e.keyCode === 9 : true) ) {
        var focused = document.activeElement;

     if (!focused || focused === document.body){ focused = null;}
        else if (document.querySelector) focused = document.querySelector(":focus");

     if( typeof window.prevFocus !=='undefined' && window.prevFocus !== null && focused !== window.prevFocus && components.length>0 && window.prevFocus.id === components[components.length-1].id) {

         Ext.getCmp(id).focus();
         window.prevFocus = document.activeElement; 
         }
     else if(components.length==0 ) {

         Ext.getCmp(id).focus(); 
         window.prevFocus = document.activeElement; 
     }
     else
     window.prevFocus = focused !== null ? focused : window.prevFocus;
    }
    return false;
}



}

Logic is

  1. if the focus is going out from the last element of the window component then it will be re assigned to the first one.

  2. if the window don't have any focus able element then the focus will remain on the window only.

Please let me know if this piece of code helps you.

Upvotes: 4

Slovo
Slovo

Reputation: 222

It`s famous bug in Extjs. Check this: http://www.sencha.com/forum/showthread.php?214072-4.1.0-Modal-Window-Bad-Focus-Behavior.

Upvotes: 2

Related Questions