PDA

View Full Version : Height/Layout Issue with Nested Containers (IE)



fff398
2 Mar 2010, 12:57 PM
This issue only arises in internet explorer.

Basically I have a viewport on my main page. Within that view port, one section holds a tabpanel container. Each tab in the tabpanel holds a form panel. Within one of the form panels I am using, another Tab Panel and that the tabs in that tab Panel hold some various panel containers.

So its like

Viewport -> tab panel -> form panel -> tab panel -> panels

anyways in the view port, I specified a 'fit' for the layout to fill up the entire screen. This works fine all the way up to the form panel(I have other forms that do not nest more tab panels).

With the form panel that has its own tab panel, in IE it does not 'fit' the entire screen, you cannot see anything within the tab panel because the height is set to essentially 0.

alot of code(the form panels are actually in their own js file, but for compactness)

In here, myForm2 shows up fine, for myForm1 in Internet Explorer, the height of the innermost tab panel is zero and doesn't extend to the entire screen(it extends in FF and chrome)

Any ideas? attached an image for ease of understanding(top is IE, buttom is FF)


Ext.onReady(function() {
Ext.QuickTips.init();


var myForm1 = Ext.extend(Ext.form.FormPanel, {
border:false,
frame: true,
initComponent: function() {

var tab1 = new Ext.Panel({
//a bunch of other panels are here with labels/textfields/etc using table layout
});

var tab2 = new Ext.Panel({
//different panels are here using table layout
});

var sum = new Ext.TabPanel({
activeTab: 0,
items: [tab1, tab2]
});

var config = {
defaults: {anchor: '-24'},
monitorValid: true,
autoScroll: true,
items: [sum]

};

Ext.apply(this, Ext.apply(this.initialConfig, config);
myForm1.superclass.initComponent.apply(this, arguments);
}
,
onRender: function() {
myForm1.superclass.onRender.apply(this, arguments));
this.getForm().waitMsgTarget = this.getEl();
}
});

var myForm2 = Ext.extend(Ext.form.FormPanel, {
border:false,
frame: true,
initComponent: function() {

var p1 = new Ext.Panel({
//a bunch of controls here, using a table layout
});

var p2 = new Ext.Panel({
//a bunch of controls here, using a table layout
});



var config = {
defaults: {anchor: '-24'},
monitorValid: true,
autoScroll: true,
items: [p1, p2]

};

Ext.apply(this, Ext.apply(this.initialConfig, config);
myForm2.superclass.initComponent.apply(this, arguments);
}
,
onRender: function() {
myForm2.superclass.onRender.apply(this, arguments));
this.getForm().waitMsgTarget = this.getEl();
}
});


var tabs = new Ext.TabPanel({
region: 'center',
activeTab: 0,
items: [{
title: 'pageOne',
html: 'this is page one'
}
]
tbar: [{
//button code to add myForm1 to a new tab
},
{
//button code to add my Form2 to a new tab
}
}]
});

var viewport = new Ext.Viewport({
id: 'vp',
layout: 'border',
border: 'false',
items: [
{
region: 'center',
layout: 'fit',
items: [tabs],
border: false
}
]
});

});

Animal
2 Mar 2010, 1:12 PM
In what way are you HOPING that the FormPanel sizes its child TabPanel?

fff398
2 Mar 2010, 1:21 PM
In what way are you HOPING that the FormPanel sizes its child TabPanel?

I am hoping that the FormPanel resizes it to fit the rest of the screen, but in IE it does not seem to size the tab panel at all, and in FF/Chrome it maximizes the tab panel to fit in the form panel whatever the form panel size may be(in the viewport, i have navigation panels with a set width, not shown in the code).

EDIT: the FormPanel seems to take the layout:'fit' i gave it in items of the viewport fine and expand fine, dropping that layout option in the config of the FormPanel does not achieve similar results

Animal
2 Mar 2010, 1:33 PM
You can't just hope. That does not affect outcomes.

http://www.extjs.com/deploy/dev/docs/?class=Ext.Container&member=layout

fff398
2 Mar 2010, 1:38 PM
You can't just hope. That does not affect outcomes.

http://www.extjs.com/deploy/dev/docs/?class=Ext.Container&member=layout

well I am under the assumption that you cannot choose a layout for tab panels, thus I cannot give it a 'fit' layout. But tab panel already takes the cardlayout, which extends fit, which is why I think it is working in FF and chrome...but IE isn't playing nicely for me