Question

我的框架有ExtJS弹出窗口，其中包含一些文本字段和按钮。我需要在弹出窗口中实现tabbing的功能。使用Tab键我需要聚焦窗口中显示的元素。但是在最后一个元素的标签上，焦点应该返回到弹出窗口中的第一个元素。

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

感谢您的解决方案。它解决了我们的问题......但部分解决了。我需要一两个建议来帮助以一般方式解决问题。

如果由于某些条件导致最后一个按钮/元素被禁用，该怎么办？在这种情况下，该按钮上的事件监听器将不起作用。在我的情况下，按''second'最后一个元素上的'tab'将焦点转移到其他控件而不是第一个控件，因为此特定按钮没有绑定事件监听器。

如果你有一个模态弹出窗口“掩盖”它背后的UI，按第二个最后一个按钮上的“tab”会将焦点转移到窗口后面的某个控件上。我相信这是一个ExtJS错误。

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

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

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

我正在使用ExtJS 4.1.0

Answer 3

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

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

弹出窗口中的ExtJs标签

3 个答案: