PDA

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

https://fiddle.sencha.com/#fiddle/13ci

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

https://fiddle.sencha.com/#fiddle/13d2

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?

jdkhamba
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()


http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Component-method-setXY


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

https://fiddle.sencha.com/#fiddle/13d2

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

https://fiddle.sencha.com/#fiddle/13ci