我在 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'
}]
....
但是,我想要底部的较小项目。
最佳答案
在你的 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'
}]
});
关于extjs - Sencha 触摸 : vbox inside hbox layout issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6279490/