我正在hbox布局中放入一个vbox布局。但是vbox工作不正常。这是代码:
代码:
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'
}]
});
在这里,vbox的两个面板正在相互叠加。如果我只创建vbox,它就可以完美地工作。这是代码:
代码:
var panel = new Ext.Panel({
fullscreen : true,
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
flex : 1,
html : '1st'
}, {
height : 50,
html : '2nd'
}]
});
我做错什么了吗?
编辑:
不知怎的,我发现,如果我以这种方式交换vbox项目,那么它就起作用了:
...
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
height : 50,
html : '2nd'
}, {
flex : 1,
html : '1st'
}]
....
不过,我想要底部较小的项目。
在您的hbox中,vbox本身缺少flex或height配置。。。
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'
}]
});