PDA

View Full Version : [SOLVED] Panels not 'stretching' in HBox



kgmoney
25 Oct 2010, 7:55 AM
Hi,

I have the following code:

var panel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
cls: 'test',
items: [
new Ext.Panel({
flex: 1,
layout: 'fit',
cls: 'mainPanels',
html: 'qwer'
}),
new Ext.Panel({
layout: 'fit',
flex: 1,
cls: 'mainPanels',
html: 'asdf'
})
]
});

and styles:


.mainPanels {
background-color: #ff0000;
color: #ffffff;
}

.test {
background-color: #00ff00;
}

and it renders as depicted in this image: 23007

My desire/expectation is that the red panels would be stretched vertically. Can someone point out to me what it is that I'm doing wrong?

Thanks much,
Kevin

gabrielstuff
25 Oct 2010, 8:17 AM
layout:'fit' ?
+ items in hbox ?

kgmoney
25 Oct 2010, 8:21 AM
Sorry, I'm afraid I'm not following...

gabrielstuff
25 Oct 2010, 8:25 AM
You have a panel which contains other panel, it should be layout:'card', and you panel should be layout:'fit', with the appropriate value for flex.
I think, but I might be wrong.

G

kgmoney
25 Oct 2010, 8:33 AM
Well, the card layout only shows one card/panel at a time, I want to have the screen split into two panels.

Steffen Hiller
25 Oct 2010, 8:47 AM
Try



layout: {
type: 'hbox',
align: 'stretch'
}

kgmoney
25 Oct 2010, 8:58 AM
Brilliant! Thanks Steffen, that works.