ExtJS - 活动选项卡失去了隐藏子面板的焦点

Question

Ext.Panel contains two child panels which are toggled with a switch button using hide() and show().
A parent panel contains the Ext.Panel and is set active based on the customer for which it is called. On calling hide() for the child panel the active tab loses focus and scrolls to the right. It should be like image below

Displays like below

Using Below code to hide and show

tab.getActiveTab().query("panel[detailsViewPanel]")[0].hide()  
tab.getActiveTab().query("panel[compactViewPanel]")[0].show()

Panel Definition

detailsPanel = new Ext.Panel(
         {
            id : Id,
            title : tabName,
            iconCls : 'tabs',
            tabTip : tabName,
            autoHeight : true,
            closable : true,
            recordData:data,
            items :[detailsViewPanel,compactViewPanel]
        });

Answer 1

A fiddle may help understand the issue better. You can have card layouts within tabs and other card layouts. This may work better than doing a hide and a show.