Window with Form and TabPanel, Height Problem

[KajaSheen]

I am trying to create a window that contains a form, which in turn contains a tab panel for splitting the inputs across different tabs. I am not able to either remove the border from the tab panel, or make the tab panel (or maybe the form) adjust the height to the container.

I adjusted the Window with Layouts Example (./examples/windows/layout.js) to show the problem. Neither changing the border nor the layout property resulted in the desired result, which is to have a 1px border all around the white panel.

Since the autoHeight Property is not supported anymore, how is this achieved?



Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function(){
var win,
button = Ext.get('show-btn');

button.on('click', function(){

if (!win) {
win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350,
layout: {
type: 'border',
padding: 5
},
items: [{
region: 'west',
title: 'Navigation',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
xtype: 'form',
border: false,
items: [{
xtype: 'tabpanel',
items: [{
title: 'Bogus Tab',
html: 'Hello world 1'
}, {
title: 'Another Tab',
html: 'Hello world 2'
}, {
title: 'Closable Tab',
html: 'Hello world 3',
closable: true
}]
}
]
}]
});
}
button.dom.disabled = true;
if (win.isVisible()) {
win.hide(this, function() {
button.dom.disabled = false;
});
} else {
win.show(this, function() {
button.dom.disabled = false;
});
}
});
});

[mitchellsimoens]

If you don't set a height or have a layout that manages height, auto heighting will be assumed.

[KajaSheen]

Ok, giving the form the layout "fit" did the trick. Which was probably the only combination I hadn't tried before. Thanks a lot for pointing me in the right direction.



...
region: 'center',
xtype: 'form',
border: false,
layout: 'fit',
...