about collapse TabPanel

[magic8262]

as below,I set "collapsible:true, titleCollapse:true".
when I cilick on tabs,the panel will collapse too,I want to collapse panel only when I click title of tabpanel,how to config?thanks

var tabs = new Ext.TabPanel({
collapsible:true,
titleCollapse:true,
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autoWidth:true,
height:250,
defaults: {autoScroll:true},
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]

});

[RWaters]

Take a look at the 'activate' event on the panel. You should be able to listen for this event then call the 'collapse' function on the panel.

[magic8262]

Thanks a lot!

[phitien]

just have the same problem, and below is my solution

xtype: 'tabpanel',
titleCollapse: true,
animate: true,
items: [{
    title: 'tab1',
    xtype: 'panel'
}, {
    title: 'tab2',
    xtype: 'panel'
}],
listeners: {
    afterrender: function() {
        var me = this;
        me.mun(me.header, 'click', me.toggleCollapse, me);
        me.mon(me.header, 'click', function(e, el, opt) {
            if(Ext.get(el).hasClass('x-tab-strip'))
                me.toggleCollapse(me.animate);
        }, me);
    }
}