PDA

View Full Version : How to add a button to a tabpanel?



bbxx
17 Oct 2009, 10:25 AM
Is there an easy way to add a button to the tabpanel? The effect I want is like on firefox; you see a button with a plus symbol to the right of your tabs and when you press it, you get a new tab.

What I was thinking of was having a tab with a plus symbol, and then when it is clicked, it creates another tab, gives focus to it, and moves itself to be the last tab again. Does this sound right?

Animal
18 Oct 2009, 6:28 AM
I just cobbled this together for you in 10 minutes: http://www.extjs.com/forum/showthread.php?t=83213

Animal
18 Oct 2009, 6:30 AM
It's a bit crap because it scrolls with the tabs if they overflow, but hey, free code.

jay@moduscreate.com
18 Oct 2009, 6:35 AM
It's a bit crap a good start because it scrolls with the tabs if they overflow, but hey, free code.

Fixed :) -- your code teaches many lessons dude.

Animal
18 Oct 2009, 8:12 AM
I'm fiddling with it to extract it from the scrolling UL when the scrollers appear and then fix it at the right. But then it has to go back in when there is room for it... still fiddling....

jay@moduscreate.com
18 Oct 2009, 8:13 AM
ideally, the + button should appear as tab itself ;)

jay@moduscreate.com
18 Oct 2009, 8:14 AM
I think i saw that pattern in IE8 or 7.

Animal
18 Oct 2009, 9:05 AM
OK, it now handles creation, and subsequent hiding of scrollers.

Animal
18 Oct 2009, 9:07 AM
ideally, the + button should appear as tab itself ;)

It does doesn't it?

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/newtabbutton.jpg

jay@moduscreate.com
18 Oct 2009, 9:12 AM
I never looked at it, to be honest. This is kick ass dude.

bbxx
18 Oct 2009, 11:19 AM
I just cobbled this together for you in 10 minutes: http://www.extjs.com/forum/showthread.php?t=83213

Wow, I wasn't expecting this! Thank you!

One minor thing: when I used it, the + tab started off small, but then it grows to the size of the other tabs. Then when the tabs overflow, the + tab shrinks back to the way it should.

http://teikena.com/temp/tab_example.png

Animal
18 Oct 2009, 12:14 PM
Which browser. Because it doesn't do that on IE, FF or Chrome for me. It looks like the screenshot.

BTW, you need to use some less deep nesting, or border: false, or Containers instead of Panels there. I see a cruft of Panel borders building up!

Animal
18 Oct 2009, 12:15 PM
Wow, I wasn't expecting this! Thank you!

One minor thing: when I used it, the + tab started off small, but then it grows to the size of the other tabs. Then when the tabs overflow, the + tab shrinks back to the way it should.

http://teikena.com/temp/tab_example.png

Do you have some of your own CSS in the page? I suspect that's damaging it.

Animal
18 Oct 2009, 12:21 PM
You have resizeTabs: true. Remove that.

Animal
18 Oct 2009, 12:28 PM
OK, I updated the plugin to work with autoSizeTabs

bbxx
18 Oct 2009, 12:28 PM
You have resizeTabs: true. Remove that.

Right! Thank you

Animal
18 Oct 2009, 12:30 PM
I suspect that you should be configuring your TabPanel with



createTab: function() {
return {
xtype: 'container',
title: 'New Formula',
layout: 'fit'
};
}

bbxx
18 Oct 2009, 12:31 PM
Which browser. Because it doesn't do that on IE, FF or Chrome for me. It looks like the screenshot.

BTW, you need to use some less deep nesting, or border: false, or Containers instead of Panels there. I see a cruft of Panel borders building up!


Yes, this has been troubling me. There is a form panel in each tab, and if i turn frame to false, there is no longer this extra border, but then the background of the panel is white instead of the nice blue I am looking for.

bbxx
18 Oct 2009, 12:32 PM
I suspect that you should be configuring your TabPanel with



createTab: function() {
return {
xtype: 'container',
title: 'New Formula',
layout: 'fit'
};
}




return {
title: 'New Formula',
iconCls: 'tabs',
layout: 'fit',
border: false,
items: newFormulaForm,
closable:true
};

Animal
18 Oct 2009, 12:36 PM
Configure it with



style: {
'background-color': '#DFE8F6'
}


Or use a class name and a rule which gives it that style

Animal
18 Oct 2009, 12:38 PM
return {
title: 'New Formula',
iconCls: 'tabs',
layout: 'fit',
border: false,
items: newFormulaForm,
closable:true
};


Yes, you see that's creating a Panel. A heavyweight class which can do lots of stuff. All you are doing is using it as a Container to hold a FormPanel.

In fact, the createTab function should return a FormPanel

shilpay
24 Feb 2012, 8:17 PM
I am looking for the same. but i didn't get it. can u please send the code for how to add a button in tabpanel. when clcik on the + icon button, it creates new tab panel. Thanks a lot.....:)