PDA

View Full Version : Nested TabPanels - how to set up margin?



andrej_marincic
22 Mar 2010, 2:11 AM
Hello,
I want to make web application using EXTJS, which i found out to be the best javascript GUI framework.
For now i'm just trying components to learn their behaviour and functionallity.

What i want is to use NESTED TabPanels (tab panel within another tab panel). The problem is that i cannot set margin of the nested panel. When i set parameter "margin" this parameter doesen't have any effect. In the API documentation i found that "this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.layout.BorderLayout.html) or one of the two BoxLayout (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.layout.BoxLayout.html) subclasses."
But i don't want to use BorderLayout for the outer tab just to enable "margin" feature, because i think this is overhead.

The question is : Is there some other way to set margin of the inner (nested) Tab panel?

Because in some cases i will use 3 level tab panel nesting - this means that i shoul use:
1st level: tab panel
2nd level: border layout + tab panel
3rd level: border layout + tab panel

But i don't wanna do that.

Can you advise me please?

thank you,
andrej

Condor
22 Mar 2010, 2:30 AM
You could use padding, e.g.

new Ext.Viewport({
layout: 'fit',
items: {
padding: 5,
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Tab 1',
padding: 5,
border: true,
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Tab 1.A',
padding: 5,
border: true,
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Tab 1.A.a',
padding: 5,
border: true,
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Tab 1.A.a.I'
}
}
}
}
}
});

andrej_marincic
22 Mar 2010, 2:46 AM
thank you very much for your help, it works :-)

best regards,
andrej