PDA

View Full Version : TabPanel nested within an accordion



apnahas
1 Nov 2010, 11:52 AM
I have a TabPanel within an Accordion layout, when I click on the title of anything in the TabPanel, it will think I am trying to collapse the accordion, and does that as well.

Also, it doesn't seem to display the TabPanel's title. It just leaves a blank there.

Condor
1 Nov 2010, 12:04 PM
You can't use a TabPanel directly as an accordion item, because it reuses the header for the tabstrip. You will need to nest it inside an extra panel.

ps. You could configure the accordion panel with layoutConfig:{titleCollapse:false}, but then you won't be able to expand or collapse the tabpanel.

apnahas
1 Nov 2010, 12:16 PM
I tried that suggestion, it seems to fix the issue I'm having but now it doesn't seem to lay out the components properly.

It looks like it has problems sizing the content within the TabPanel. For things that are dynamically added to things within the layout, it doesn't update the size to reflect the changed content.

When I had the TabPanel nested directly, it was adjusting its size correctly when I was changing the HTML of various elements.. but not when I have the TabPanel under the Panel



If I use titleCollapse:false with the TabPanel nested directly, would there be some way of setting the title?

Condor
1 Nov 2010, 10:48 PM
If I use titleCollapse:false with the TabPanel nested directly, would there be some way of setting the title?

No, the header is already used for the tabstrip, so there is no title.

ps. This patch (http://www.sencha.com/forum/showthread.php?31069-UNKNOWN-2.x-3.x-BUG-GridPanel-inside-accordion-layout-forceFit-problem-IE6&p=396044#post396044) might help with the sizing.

apnahas
2 Nov 2010, 9:38 AM
Thanks, but i am still having sizing issues. It doesn't seem to adjust the size of the inner TabPanel whenever it changes. Do you know how to fix that issue? Could I set a minimum height or something? What it displays is basically an Accordion, the Top Level of the TabPanel, and items within the TabPanel but their height is permanently set to whatever they were rendered to by default. So if I draw something in a Panel of the TabPanel the height doesn't readjust itself.

There is a lot of whitespace between the Panels and the next accordion, How would I set it to auto fill that space between the Panel and accordion?

Condor
2 Nov 2010, 11:49 PM
So you are using:

{
title: 'Accordion',
region: 'west',
layout: 'accordion',
items: [{
title: 'Panel 1'
},{
title: 'Panel 2',
layout: 'fit',
items: {
xtype: 'tabpanel',
items: [{
title: 'Tab 1'
}, {
title: 'Tab 2'
}]
}
}, {
title: 'Panel 3'
}]
}
(with the patch I posted above)

apnahas
3 Nov 2010, 6:24 AM
The layout:'fit' fixed it, thanks