[SOLVED] Panels not 'stretching' in HBox

[kgmoney]

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]

layout:'fit' ?
+ items in hbox ?

[kgmoney]

Sorry, I'm afraid I'm not following...

[gabrielstuff]

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]

Well, the card layout only shows one card/panel at a time, I want to have the screen split into two panels.

[Steffen Hiller]

Try



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

[kgmoney]

Brilliant! Thanks Steffen, that works.