Toggle an item when another item is opened (border layout) ExtJS4

Question

My aim is clear and (seems) simple ! If you look at this example : http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout/complex.html and click in the "Center Panel" tab, you'll see a button which aim to toggle on/off the west region item. I've tried the same thing into my application and it works well.

Now, what I want, is the west region be toggled on automatically when someone clicks on the "Center Panel" tab. Is it possible ?

I hope I'm clear as possible. I can't figure it out. PS : I can provide some of my code if needed.

Thanks by advance.

Answer 1

If I understand you correctly, you want the west panel to expand when you click on the Center Panel tab. If so, you need to create a listener for the 'activate' event of Center Panel.

For an example, see jsFiddle here: http://jsfiddle.net/52cSF/1/

Ext.onReady(function () {

    Ext.create('Ext.panel.Panel',{
        title:'mainpanel',
        layout:'border',
        height:500,
        width:600,
        renderTo:'mypanel',
        items:[{
            region:'west',
            width:200,
            title:'West',
            id: 'west-panel',
            collapsible:true,
            collapsed:true,
            html:'west html'
        },{
            xtype:'tabpanel',
            region:'center',
            title:'TabPanel',
            items:[{
                title:'Tab 1'
            },{
                title: 'Center Panel',
                listeners: {
                    activate: function(){
                        Ext.getCmp('west-panel').expand();
                    }
                }
            }]
        }]
    });
});