CODEWITHSUNDEEP
extjswindowtabbing
AJJ
AJJ

Reputation: 3628

ExtJs tabbing in popup window

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?

Upvotes: 0

Views: 3075

Answers (2)

AJJ
AJJ

Reputation: 3628

You can write a listener for second last element and focus the first element in the window if the last element is disabled. Else focus the last element. i could not find any generic way to handle this.

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

Upvotes: 0

AJJ
AJJ

Reputation: 3628

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

Upvotes: 1

Related Questions