我展示了一个带有一些输入控件的模态窗口。当我按下“tab”键时,它会在这些控件之间导航。
如果我继续按“tab”键,在某个时刻它会聚焦到这个窗口后面的控件,我甚至可以在这些控件中输入。
我正在使用ExtJs 4.1
谢谢。
我已经采用了一些解决方法,现在可以正常工作。请查看下面的内容并告诉我您的想法。
/* ***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;
}
}
逻辑是:
如果焦点从窗口组件的最后一个元素移出,则将重新分配到第一个元素。
如果窗口没有任何可聚焦元素,则焦点将保留在窗口上。
请告诉我这段代码是否对您有帮助。