extjs - 弹出窗口中的 ExtJs 选项卡

Question

我的框架有带有一些文本字段和按钮的 ExtJS 弹出窗口。我需要在弹出窗口中实现选项卡的功能。使用制表键我需要关注窗口中显示的元素。但是在最后一个元素的选项卡上，焦点应该返回到弹出窗口中的第一个元素。

extjs 中的任何 api 都有助于实现此功能吗？

Answer 1

通过向弹出窗口中的第一个和最后一个元素添加侦听器来解决此问题。

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);
    }
  }
); 

Answer 2

感谢您的解决方案。它为我们解决了这个问题......虽然部分。我需要一两个建议来帮助以通用方式解决问题。

如果由于某种情况最后一个按钮/元素被禁用怎么办。在这种情况下，该按钮上的事件侦听器将不起作用。在我的情况下，按下“第二个”最后一个元素上的“选项卡”会将焦点转移到其他控件而不是第一个控件，因为此特定按钮没有绑定事件侦听器。

如果您有一个模态弹出窗口“屏蔽”其后面的 UI，则按倒数第二个按钮上的“选项卡”会将焦点转移到窗口后面的某个控件上。我相信这是一个 ExtJS 错误。

您可以进行快速测试来验证此行为：

1. 在主视图中创建一个“按钮”
2. 单击该按钮应打开一个确认对话框（模式）
3. 窗口打开后，多次按 Tab 键，并注意焦点将返回到首先启动窗口的按钮。

知道如何解决这个问题吗？

我正在使用 ExtJS 4.1.0

Answer 3

如果最后一个元素被禁用，您可以为倒数第二个元素编写一个侦听器并聚焦窗口中的第一个元素。否则关注最后一个元素。我找不到任何通用的方法来处理这个问题。

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