titleCollapse in TabPanel in extjs 3.4

Question

In ExtJS 3.4, TabPanel, for implementing collapsible:true and titleCollapse:true, enables collapse and expand of the TabPanel. However, even when click on tabs also results in collapse / expand.

How to avoid this situation?

var tabs2 = new Ext.TabPanel({
    collapsible:true,
    titleCollapse:true,
    renderTo: document.body,
    activeTab: 0,
    width:600,
    height:250,
    plain:true,
    defaults:{autoScroll: true},
    items:[{
            title: 'Normal Tab',
            html: "My content was added during construction."
        },{
            title: 'Ajax Tab 1',
            autoLoad:'ajax1.htm'
        },{
            title: 'Ajax Tab 2',
            autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
        },{
            title: 'Event Tab',
            listeners: {activate: handleActivate},
            html: "I am tab 4's content. I also have an event listener attached."
        },{
            title: 'Disabled Tab',
            disabled:true,
            html: "Can't see me cause I'm disabled"
        }
    ]
});

Xupypr MV Xupypr MV · Accepted Answer · 2013-04-10T12:59:58

remove titleCollapse:true, property. Tab headers renders inside title element, when you turn titleCollapse property on, your buttons also works as expand/collapse buttons.

titleCollapse in TabPanel in extjs 3.4

1 Answers