javascriptextjsfocusextjs6tabpanel

Set focus on tab

I have a Ext js tabpanel, when we redirect a tab using mouse its focus is maintained as displayed in the image attached. when we dynamically change the tab using setActiveItem method, tab gets active but focus is lost.

enter image description here

I tried setting up the focus manually using below methods.

tab.focus();

tabpanel.down('tabbar').el.dom.getElementsByTagName('a')[0].focus();

tabpanel.el.dom.getElementsByTagName('a')[0].focus();

But unable to set focus dynamically. Any hints please.

Testing fiddle can be found here

Solution

  • You can use the following solution:

    ...
...
launch : function() {
   Ext.create('Ext.tab.Panel', {
       renderTo: Ext.getBody(),
       listeners: {
           tabchange: function(me, nw, old){
               me.getTabBar().activeTab.focus(); // This will focus tab on setActiveItem
           }
       },
...
...