7

いくつかの入力コントロールを含むモーダル ウィンドウを示します。「タブ」キーを押すと、コントロール間を移動します。

「タブ」を押し続けると、ある時点でこのウィンドウの背後にあるコントロールにフォーカスし、このコントロールに入力することさえできます。

私は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 に答える