我有一个问题vbox
布局所以我创建了一个简单的例子
这说明了问题,这让我vbox
布局到fit
屏幕的高度。
On the hbox
屏幕上,视图看起来符合预期。
然而,当我简单地改变hbox
to vbox
所有文本都覆盖在左上角。
所有代码都在下面给出,并且已经打开煎茶小提琴 http://www.senchafiddle.com/#cxuMl
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
}]
}
});