我在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的2个面板相互交叉。如果我只是创建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'
}]
....
但是,我希望底部的小项目。
答案 0 :(得分:3)
在您的hbox中,vbox本身缺少弹性或高度配置...
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'
}]
});