View Full Version : Collapse/Expand Tab Bar with a button on it

Bhanu katraparthi
6 Jan 2016, 2:28 AM
Hi All, I am new Bee to ExtJs, currently i am using Extjs 4.2

I am facing a problem with Collapse/Expand Tab Bar with a button on it

When I use Collapsible : true, it shows a panel header at the top of tab bar with collapse/expand tool, which is not I want,I want to collapse/expand the tab bar with a button on it

Need Suggestion on this

Please find the code in fiddle


6 Jan 2016, 7:40 AM
You could do something like this:


Bhanu katraparthi
6 Jan 2016, 8:04 AM
Thanks for the Reply :),

Can I place the same button with same functionality that you have mentioned in your code be floating on the right corner of the tab panel .

For example : Tab1 | Tab2 | Space until the end of the tab | Button

So that when I click on the button tab panel will collapse/expand but the button will remain same?

6 Jan 2016, 8:38 AM
Tha could be a little tricky since in order for that to happen, the button cannot be a part of the tabpanel. You have to have a button as a floating component by setting floating:true and making sure it appears at the right place using setXY()


You could also have the viewport have hbox layout. I have modified my fiddle:


Bhanu katraparthi
19 Jan 2016, 5:00 AM
Hi Thanks a lot I have resolved this in a simpler manner not sure whether this is a good approach or not ?

solved example is here