I have the following Ext.TabPanel:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
//layout: 'fit', // makes component disappear
viewConfig: {
forceFit: true //has no effect
},
// height: auto, //error "auto isn't recognized"
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
which looks like this:
How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?
Here's how the TabPanel is loaded into regionContent
:
regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
autoScroll: true
});
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
replaceComponentContent(regionContent, modules_info_panel);
I see that the height is for this element in the dom is absolute (19px), where is that being set?
McStretch, I tried your idea by putting layout: 'fit'
in the tabs themselves but the line still is in the same place:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Section 1',
layout: 'fit',
html: 'test'
},{
title: 'Section 2',
layout: 'fit',
html: 'test'
},{
title: 'Section 3',
layout: 'fit',
html: 'test'
}]
});
Corrected:
Sorry Edward I was incorrect, you want layout: 'fit'
within your regionContent Panel. The updated code changes are below.
Your initial idea of using layout: 'fit'
is correct, but you have it in the wrong location. You want the following:
var regionContent = new Ext.Panel({
region : 'center',
autoScroll : true,
layout : 'fit', // added this line
items : []
});