7

我展示了一个带有一些输入控件的模式窗口。当我按下“tab”键时，它会在控件中导航。

如果我继续按“选项卡”，在某些时候它会将控件集中在此窗口后面，我什至可以输入此控件。

我正在使用 ExtJs 4.1

谢谢。

4

2 回答 2

4

做了一些解决方法，为我工作，检查一下，请告诉我。

/* ***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;
}



}

逻辑是

  1. 如果焦点从窗口组件的最后一个元素出去，那么它将被重新分配给第一个元素。

  2. 如果窗口没有任何可聚焦元素，则焦点将仅保留在窗口上。

如果这段代码对您有帮助，请告诉我。

于 2012-12-21T10:46:39.710 回答
2

这是 Extjs 中著名的错误。检查这个： http ://www.sencha.com/forum/showthread.php?214072-4.1.0-Modal-Window-Bad-Focus-Behavior 。

于 2012-11-01T06:15:18.637 回答