我有一个问题vbox
布局,我创建了一个简单的例子,说明了这个问题,它让我的vbox
布局fit
屏幕的高度。
在hbox
屏幕,观点看上去符合市场预期。
然而,当我简单地改变hbox
到vbox
在左上角的所有文字覆盖。
下面所有的代码,并给出它的上煎茶提琴
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SenchaFiddle',
views: ['MainView', 'HboxView', 'VboxView'],
launch: function() {
Ext.Viewport.add(Ext.create('SenchaFiddle.view.MainView'));
}
});
MainView.js
Ext.define("SenchaFiddle.view.MainView", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'hbox',
iconCls: 'action',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Hbox'
}, {
xtype: 'hbox-view'
}]
}, {
title: 'vbox',
iconCls: 'action',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Vbox'
}, {
xtype: 'vbox-view'
}]
}]
}
});
HboxView.js
Ext.define("SenchaFiddle.view.HboxView", {
extend: 'Ext.Container',
xtype: 'hbox-view',
config: {
style: 'background-color: #0f0',
layout: 'hbox',
items: [{
xtype: 'panel',
html: 'baz',
style: 'background-color: #ff0',
flex: 1
}, {
xtype: 'panel',
html: 'foo',
style: 'background-color: #f00',
flex: 2
}, {
xtype: 'panel',
html: 'bar',
style: 'background-color: #fff',
flex: 3
}]
}
});
VboxView.js
Ext.define("SenchaFiddle.view.VboxView", {
extend: 'Ext.Container',
xtype: 'vbox-view',
config: {
style: 'background-color: #0f0',
layout: 'vbox',
items: [{
xtype: 'panel',
html: 'baz',
style: 'background-color: #ff0',
flex: 1
}, {
xtype: 'panel',
html: 'foo',
style: 'background-color: #f00',
flex: 2
}, {
xtype: 'panel',
html: 'bar',
style: 'background-color: #fff',
flex: 3
}]
}
});