Extensive focus windows

Question

I am showing a modal window with some input controls. When I press the tab key, it moves through the controls.

If I keep clicking on the “tab”, at some point it focuses the controls behind these windows, and I can even enter these controls.

I am using ExtJs 4.1

thanks.

Answer 1

This is a famous bug in Extjs. Check this out: http://www.sencha.com/forum/showthread.php?214072-4.1.0-Modal-Window-Bad-Focus-Behavior .

Answer 2

We’ll do 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; } } 

Logics

• if the focus leaves the last element of the window component, it will be assigned to the first.

• if there is no focusing element in the window, then the focus will remain only in the window.

Please let me know if this piece of code helps.