Extjowskie okna modalne sterujące tylnym sterowaniem

Question

Wyświetlam okno modalne z niektórymi kontrolkami wprowadzania. Kiedy naciskam klawisz "tab", przechodzę przez kontrolki.

Jeśli nadal będę naciskać "tabulator", w pewnym momencie skupi się on na elementach sterujących za oknami, a ja mogę nawet wpisać te elementy sterujące.

Używam ExtJs 4.1

dziękuję.

Answer 1

To słynny błąd w programie Extjs. Sprawdź to: http://www.sencha.com/forum/showthread.php?214072-4.1.0-Modal-Window-Bad-Focus-Behavior.

Answer 2

Zrobiłem kilka obejść, pracując dla mnie, sprawdź to i proszę dać mi znać.

/* ***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 jest

1. jeśli ostrość jest wyjście z ostatniego elementu składnika okna zostanie on ponownie przydzielony do pierwszego.

2. Jeśli okno nie ma elementu, który można ustawić, fokus pozostanie tylko w oknie.

Proszę dać mi znać, jeśli ten fragment kodu pomoże.