Hide/show panel in accordion as per tabs in tabpanel

[jlimaye]

Hi,
I have accordion in viewport on west region like

var accordionPanel = new Ext.Panel({
        region:'west',
        flex:1,
        width: 178,
        layout:'accordion',
        autoScroll:true,
        items: [{
            title: 'Data Source',
            items:[combo1]
        },{
            id:'groupAccordion',
            title: 'Grouping',
                items:[radioPanel]
        },{
            title:'Filters',
            items:[combo2]
        },
            {
            title: 'Legend'
        },{
            title:'Quick Help',
            autoScroll : true,
            html: 'To move an event,click and drag the event to the desired time.'
        }]
    });

I have a tabpanel with 3 tabs in central region. Now on tabchange, Im trying to hide or show the group panel in accordion but unable to do so. Tried different things but not able to do it.

Ext.getCmp("tabpanel").on('tabchange', function(tabPanel,newCard,oldCard,eOpts) {
           if(tabPanel.getActiveTab()!=1){
               Ext.Msg.alert('test');
               Ext.getCmp("groupAccordion").style.visibility = false;
              // Ext.getCmp("groupAccordion").hide();
           }else{
               Ext.getCmp("groupAccordion").style.visibility = true;
               //Ext.getCmp("groupAccordion").show();
           }
        });

What might be going wrong??

[scottmartin]

Where you receiving any error in the console?

I tested the following code and it seemed to work:

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    layout: {
        type: 'accordion'
    },
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    title: 'My Panel 1'
                },
                {
                    id: 'idp2',
                    // itemId: 'id-panel-2',
                    title: 'My Panel 2'
                },
                {
                    title: 'My Panel 3'
                }
            ]
        });

        me.callParent(arguments);
    }

});

Ext.onReady(function(){

    Ext.create('MyPanel', {
        itemId: 'main-panel',
        height: 450,
        width: 400,
        renderTo: Ext.getBody(),
        tbar: [
        {
            text: 'hide panel',
            handler: function(){
                // var mainPanel = this.up('#main-panel'); // instead of using hard id's all over the place
                // var pnl2 = mainPanel.down('#id-panel-2');
                pnl2 = Ext.getCmp('idp2');
                pnl2.hide();
            }
        },
        {
            text: 'show panel',
            handler: function(){
                // var mainPanel = this.up('#main-panel'); // instead of using hard id's all over the place
                // var pnl2 = mainPanel.down('#id-panel-2');
                pnl2 = Ext.getCmp('idp2');
                pnl2.show();
            }
        }
        ]

    }); 

});

Regards,
Scott.