extjs - ポップアップウィンドウでのExtJsタブ

Question

私のフレームワークには、いくつかのテキストフィールドとボタンを備えたExtJSポップアップウィンドウがあります。ポップアップウィンドウ内でタブを使用する機能を実現する必要があります。タブキーを使用して、ウィンドウに表示されている要素に焦点を合わせる必要があります。ただし、最後の要素をタブで移動すると、フォーカスはポップアップウィンドウの最初の要素に戻るはずです。

extjsのAPIは、この機能を実現するのに役立ちますか？

Answer 1

最後から 2 番目の要素のリスナーを記述し、最後の要素が無効になっている場合は、ウィンドウ内の最初の要素にフォーカスできます。それ以外の場合は、最後の要素にフォーカスします。これを処理する一般的な方法が見つかりませんでした。

 secondLaseElement: 
  listeners: {
    keydown: function(e) { 
      if (lastelement disabled?) { 
        focus(firstelement); 
      } else { 
        focus(lastelement); 
      } 
    }
  }

Answer 2

解決策をありがとう。それは私たちの問題を解決しました...部分的には. 一般的な方法で問題を解決するのに役立つ提案が1つか2つ必要です。

何らかの条件により、最後のボタン/要素が無効になっているとどうなりますか。その場合、そのボタンのイベント リスナーは機能しません。私の場合、「2番目」の最後の要素で「タブ」を押すと、この特定のボタンにはイベントリスナーがバインドされていないため、最初のコントロールではなく他のコントロールにフォーカスが移動します。

背後にある UI を「マスキング」しているモーダル ポップアップ ウィンドウがある場合、最後から 2 番目のボタンで「タブ」を押すと、ウィンドウの背後にあるコントロールにフォーカスが移動します。これは ExtJS のバグだと思います。

簡単なテストを実行して、この動作を確認できます。

1. メイン ビューに「ボタン」を作成する
2. そのボタンをクリックすると、確認ダイアログが開きます (モーダル)
3. ウィンドウが開いたら、タブを複数回押すと、最初にウィンドウを起動したボタンにフォーカスが戻ることに注意してください。

この問題を解決する方法はありますか?

ExtJS 4.1.0 を使用しています

Answer 3

ポップアップウィンドウの最初と最後の要素にリスナーを追加することで、これを解決しました。

var firstElement = Ext.getCmp('firstEl');
var lastElement = Ext.getCmp('lastEl');
Ext.EventManager.addListener(
  firstElement.el,
  'keydown',
  function(e){
    var key = e.getKey();
    var shiftKey = e.shiftKey;
    if (shiftKey && key == e.TAB){
      e.stopEvent();
      lastElement.focus(true, 100);
    }
  }
);    

Ext.EventManager.addListener(
  lastElement.el,
  'keydown',
  function(e){
    var key = e.getKey();
    var shiftKey = e.shiftKey;
    if (!shiftKey && key == e.TAB){
      e.stopEvent();
      firstElement.focus(true, 100);
    }
  }
);