logo标签列表

Extjs 模态窗口聚焦回控件

extjsextjs4
7

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

如果我继续按“tab”键，在某个时刻它会聚焦到这个窗口后面的控件，我甚至可以在这些控件中输入。

我正在使用ExtJs 4.1

谢谢。

这个 bug 在 ExtJS 版本 5.0.1.1255 上仍然存在。有什么建议吗？ - dataol
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. 如果窗口没有任何可聚焦元素，则焦点将保留在窗口上。

请告诉我这段代码是否对您有帮助。

2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接