View Full Version : How to collapse/expand a tab panel with a button on the

Bhanu katraparthi
6 Jan 2016, 1:56 AM
Hi All,

I am a new bee to Extjs, currently i am using Extjs 4.2

I want to know how to make a tab panel collapse/expand ?

I used collapsible : true, but it gives me another panel header at the top of tab bar which is not what i want

I want a button on the tab bar, on click of the button tab bar should collapse/expand

I am able to add a button to tab panel, on a click of it able to collapse it, but when again i click on the button to expand it the tab bar got disappeared :(

Any suggestions ? where I did mistake ?

Below is my code :

Ext.create('Ext.tab.Panel', {
id : 'lower_panel',
width: 400,
height: 400,
layout: 'border',
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'

listeners: {
afterrender: function(panel) {
var bar = panel.tabBar;
bar.insert(2, [{
xtype: 'component',
flex: 1
}, {
xtype: 'button',
text: 'button',
handler: function() {
var bottomGrid = Ext.getCmp('lower_panel');


6 Jan 2016, 10:31 AM
Take a look at this: