Question

My framework has the ExtJS pop up window with some text fields and buttons. I need to achieve the functionality of tabbing inside the popup window. using tab keys i need to focus the elements displayed in the window. But on tabbing of last element the focus should return to first element in the popup window.

Any api’s in extjs helps to achieve this functionality?

Answer 1

Got this resolved by adding a listener to first and last element in the popup window.

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