PDA

View Full Version : [4.1.1a, TabPanel] Separate TabBar from Tabs



Werzi2001
30 Nov 2012, 1:20 AM
Hi,

is it possible to render the tabBar of a TabPanel to a completly different location than the Tabs itself? I would like to build a kind of task bar at the bottom of the page (= tabBar of TabPanel of the main content area).

Thanks!

Yours
Werzi2001

mitchellsimoens
3 Dec 2012, 4:40 AM
I'm not quite sure what you are saying but sounds like you shouldn't use a tab panel but a toolbar with a container using card layout.

Werzi2001
3 Dec 2012, 5:02 AM
But then i would have to implement the synchronization between the card layout and the toolbar by myself (adding/removing new panels, order of panels), wouldn't i?

The TabPanel does already have all of this logic. The only thing i would have to do is separate the TabPar from the Panels.

slemmon
3 Dec 2012, 8:42 PM
See if this works for you. You can remove a docked item (like tabBar and then either add it as a docked item somewhere else or whatever you choose. If you're adding the tabBar to the bottom of something you might start by defining the tabPanel using the tabPosition: 'bottom'.

http://jsfiddle.net/slemmon/Hszjj/



var p = Ext.widget('panel', {
renderTo: Ext.getBody()
, height: 200
, width: 300
, bodyPadding: 7
, html: 'Some random component'
});



Ext.widget('tabpanel', {
renderTo: Ext.getBody()
, height: 200
, width: 300
, margin: '10 0 0 0'
, defaults: { bodyPadding: 7 }
, items: [{
title: 'first tab'
, html: 'first tab body'
}, {
title: 'second tab'
, html: 'second tab body'
}]
, listeners: {
boxready: function (tp) {
var tb = tp.getTabBar();
tp.removeDocked(tb, false);
p.addDocked(tb, 'top');
}
}
});?

Werzi2001
4 Dec 2012, 12:02 AM
Hi slemmon,

thanks. That looks like the thing i wanted. I'll give it a try.

Yours
Werzi2001

Edit:
I tried it but it seems not to work within a viewport. I updated your example:
http://jsfiddle.net/Hszjj/1/
Do you know why i get a js error?

ettavolt
4 Dec 2012, 4:41 AM
That overnesting... Try this: http://jsfiddle.net/Hszjj/2/

Werzi2001
17 Dec 2012, 6:22 AM
Sorry didn't notice your reply until now.
Yes you are right, that are far more components than needed for this example. But this is only a reduced example for the whole project and this nesting is needed by the complete project.

But even if i reduce the nesting for this example i get the same error if i add the tabBar to the south-panel (i don't need it in a window ;-) ):
http://jsfiddle.net/Hszjj/4/
So the problems seems not to be the nesting but the south panel?

slemmon
17 Dec 2012, 7:24 AM
Use:

tabpanel.removeDocked(tabbar, false);

The false will prevent the tabbar from being destroyed when removed.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.DockingContainer-method-removeDocked

Werzi2001
17 Dec 2012, 7:27 AM
Thanks a lot. That did it.

Edit:
I am sorry but i still doesn't work as intended:
http://jsfiddle.net/Hszjj/6/
If i add the tabbar to the viewport (after setting tabbar.region to south) it works. But it doesn't if i add the tabbar to another panel (in the example the south panel). The tabbar is added (html is there if you check using firebug) but not rendered correctly.

skirtle
18 Dec 2012, 4:10 AM
The problem is the CSS top is still set.

You should put a suitable layout on the south region. However, depending on what layout you choose it may not reset the top style (e.g. vbox would reset it, fit wouldn't). You could always remove the top style manually in the boxready listener:


tabbar.el.setTop(0);

http://jsfiddle.net/hZUfD/

Werzi2001
18 Dec 2012, 5:26 AM
The setTop fixed it. Thanks!

slemmon
18 Dec 2012, 7:22 AM
Skirtle,
I've not used setTop() before. I'm looking at the API docs for it and am not sure what it does or when it's to be used. Any chance you could elaborate on what it's doing?

Werzi2001
18 Dec 2012, 7:25 AM
I didn't take a look into the code but i think it only sets the css top property to the given value. That seems to be needed in my case at the css top property is not set (changed) by the fit-layout.

skirtle
18 Dec 2012, 9:09 AM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-setTop

The tabbar is being moved in a boxready listener, after the layouts have run, so the layout for the tabpanel will have set all sorts of CSS styles for sizing and positioning the tabbar. One of them is the top. You end up with the main el for the tabbar having something like this on it:


style="top: 357px;..."

It's used to position the tabbar at the bottom of the tabpanel.

When you move it to the south region that style isn't being cleared automatically and the layout on the south region isn't setting it either. I'm not sure why, it's probably a bug. A bit of experimenting suggests that using a vbox layout would set the top value correctly, whereas using a fit layout doesn't.

This entire approach seems to be relying on similar bugs though. When the tabbar is removed from the tabpanel it is no longer docked, so all the docked CSS classes should really be removed. They aren't, but that proves useful in this case because it would destroy the styling if all those classes were removed. Be prepared for this to need more work when you upgrade to newer versions of the library.

slemmon
18 Dec 2012, 9:13 AM
Thanks for the reply, Skirtle.

I love it when you're posting on the forums. I'm always picking up knowledge from your contributions.

skirtle
18 Dec 2012, 9:34 AM
I love it when you're posting on the forums. I'm always picking up knowledge from your contributions.

Thanks. I've not had much time free recently to spend on the forums but I drop in when I can.