PDA

View Full Version : Ext Panel sizing



sancho1980
12 Feb 2011, 2:19 AM
Hi
I dont understand the sizing (width and height) of Ext.Panel.
I'm trying to build a simple GUI by placing 3 panels into my Form, (the layout of the form is set to vbox, because the three panels are to appear on top of each other) and then i add a few components into these panels (the layout of the panels is hbox, because all elements within the panels are to appear side by side)..but then the sizing get completely screwed up..some components are placed on top of others and so on..what i want is that the panel width and height be automatically adjusted so that all components fit in and that no component gets cut off, is there no easy way to accomplish this? i thought this was kind of standard stuff...

Condor
12 Feb 2011, 2:39 AM
Did you configure the vbox layout with layoutConfig:(align:'stretch'}?

sancho1980
12 Feb 2011, 8:28 AM
well simple question what's wrong with this here:

loadbutton = new Ext.Button({
text: "Load list..."
});

addtolistbutton = new Ext.Button({
text: "Add to list..."
});

newlistbutton = new Ext.Button({
text: "New list..."
});
howmanytextfield = new Ext.form.TextField({

});

gobutton = new Ext.Button({
text: "Go!"
});

listselectpanel = new Ext.Panel({
layout: "hBox",
items: [
loadbutton,
addtolistbutton,
newlistbutton
],
});

gopanel = new Ext.Panel({
layout: "hBox",
items: [
howmanytextfield,
gobutton
]
});
upperpanel = new Ext.Panel({
layout: "hBox",
items: [
listselectpanel,
gopanel
]
});

new Ext.Panel({
renderTo: Ext.getBody(),
visible: true,
items: [
upperpanel
]
});

when i remove
layout: "hBox", from upperpanel, I can at least SEE my components, but then i dont get the horizonzal layout i want (i.e. listselectpanel and gopanel side by side)

Condor
12 Feb 2011, 8:35 AM
1. It's layout:'hbox' and not 'hBox'.
2. Items in a hbox layout need either a width or a flex config option.
3. The container with hbox layout needs to have a width.