PDA

View Full Version : Why does my panel not display anything when layout is set to border?



KallDrexx
18 Dec 2010, 3:19 PM
As of right now I have a working tab panel in my website, and when I perform an action a tab gets added to the tabpanel. Right now the tab renders all the items correctly with the following items definition



return [{
xtype: 'panel',
region: 'north',
autoHeight: true,
items: this.buildToolbar()
}, {
xtype: 'panel',
region: 'center',
autoHeight: true,
items: [{
xtype: 'fieldset',
title: 'Details:',
collapsible: true,
autoHeight: true,
items: [this.detailForm]
}]
}];

However, I now want to add an eastern collapsible panel to this tab only, so in the panel's config I added `layout: 'border',`. Now nothing is rendered inside of my tab. If I then comment out my `layout` call, everything renders fine.

Why does nothing render when this panel is set to be a border layout?

KallDrexx
18 Dec 2010, 7:48 PM
Figured this out with some help from SO people. Turns out, the viewport's center region needed layout: 'fit' for the inside elements to all work correctly

Animal
19 Dec 2010, 12:53 AM
Well no. You need to make this.detailForm the center region.

Don't bother wrapping it with an extra layer of panelling. That's a waste of DOM.

KallDrexx
19 Dec 2010, 10:11 AM
Well no. You need to make this.detailForm the center region.

Don't bother wrapping it with an extra layer of panelling. That's a waste of DOM.

I'm doing this because there will be several other components in the center region besides the detail form, I just haven't created those components yet.