PDA

View Full Version : How to stretch Panel inside of a FormPanel on full height of a container.



Turtle
26 Jan 2011, 4:37 AM
Hi everybody.

There is a layout i want to implement.

->Viewport layout:fit
-->FormPanel layout:form
--->Panel layout:Vbox
-----> Panel
-----> Panel

But my Vbox layout panel inside of a formpanel doesn't fill all height of a formpanel.

When i change FormPanel to simple Panel with layout 'fit' everything works fine. And my Vbox layout Panel fills all height of a parent container.

Is there any way to make panel inside of a FormPanel to be stretched on full height of a container?


Thanks.

Cybjorg
26 Jan 2011, 6:57 AM
What do you have your 'align' property set to in the 'layoutConfig' for the vbox?

Seana
26 Jan 2011, 7:30 AM
Hi everybody.

There is a layout i want to implement.

->Viewport layout:fit
-->FormPanel layout:form
--->Panel layout:Vbox
-----> Panel
-----> Panel



minimally this should get you headed in the right direction...


{
xtype: 'form',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
layout: 'form',
flex: 1,
items: [...]
},{
layout: 'form',
flex: 1,
items: [...]
}]
}

note there isn't a second panel in the form to contain the vbox, to cut down on over nesting.

mitchellsimoens
26 Jan 2011, 7:49 AM
note there isn't a second panel in the form to contain the vbox, to cut down on over nesting.

Was just about to post about over nesting. Great job! :)

Seana
26 Jan 2011, 7:58 AM
Was just about to post about over nesting. Great job! :)

Something that I failed to mention that I got caught on when I first started with Ext and the FormPanel which I think I should have...

When using a FormPanel they will default to layout: 'form' however they don't NEED to be. The only place where the layout type 'form' must be used is a panel that is directly containing form controls.

(My first FormPanels were horribly over nested)

valititi
26 Jan 2011, 4:20 PM
is not easier with another layout than vbox (border for example) ? and have you try to play with ANCHOR:'100% 100%'
?

mitchellsimoens
26 Jan 2011, 4:25 PM
VBox can stretch things vertically by doing this:


{
xtype: "panel",
layout: "vbox",
layoutConfig: { align: "stretch" }
...
}

OR you can use AnchorLayout and use the anchor config


{
xtype: "panel",
layout: "anchor",
items: [
{ xtype: "panel", anchor: "100% 100%" }
]
}

First 100% is width, second is height.