PDA

View Full Version : hbox and vbox layout does not work together!



liduqun
15 Feb 2012, 5:01 PM
for the following example, the textfield does not appear!

Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 500,
height: 300,
layout: {
type: 'vbox'
},


items: {
xtype: 'fieldcontainer',
flex: 1,
layout: {
type: 'hbox'
},
items: {
xtype: 'fieldcontainer',
flex: 1,
items: {
xtype: 'textfield',
fieldLabel: "textfield",
value: "textfield"
}


}
}




})

vietits
15 Feb 2012, 11:58 PM
It is OK if you set align config of vbox layout to 'stretch' as follow:


Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 500,
height: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
items: {
xtype: 'fieldcontainer',
flex: 1,
layout: {
type: 'hbox'
},
items: {
xtype: 'fieldcontainer',
flex: 1,
items: {
xtype: 'textfield',
fieldLabel: "textfield",
value: "textfield"
}
}
}
});