Sencha Touch : vbox inside hbox layout issue - extjs

Question

I am putting a vbox layout inside hbox layout. But the vbox isn't working properly. Here is the code:
Code:
var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'hbox',
align : 'stretch'
},
items : [{
width : 50,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
flex : 1,
html : '1st'
}, {
height : 50,
html : '2nd'
}]
}, {
flex : 1,
html : 'Large'
}]
});
Here, the 2 panels of vbox is coming over one another. If I just create the vbox only, it works perfectly. Here is the code:
Code:
var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
flex : 1,
html : '1st'
}, {
height : 50,
html : '2nd'
}]
});
Am I doing anything wrong?
EDIT:
Somehow, I find, if I swap the vbox items this way, then it works:
...
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
height : 50,
html : '2nd'
}, {
flex : 1,
html : '1st'
}]
....
However, I want the smaller item at the bottom.

Answer 1

In your hbox, the vbox itself is missing a flex or height config...
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 50,
flex:1, // this needs to be flexy as well
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '1st'
}, {
height: 50,
html: '2nd'
}]
}, {
flex: 1,
html: 'Large'
}]
});