选项卡面板中的VBox布局问题 [英] Vbox layout issue in a tab panel
本文介绍了选项卡面板中的VBox布局问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
vbox
布局有问题,所以我创建了一个简单的示例
这说明了问题,即将我的vbox
布局设置为fit
屏幕的高度。
在hbox
屏幕上,该视图看起来与预期一致。
但是,当我简单地将
hbox
更改为vbox
时,所有文本都覆盖在左上角。
所有代码如下所示,位于Sencha Fiddle
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
}]
}
});
推荐答案
问题在MainView.js结构中。 您的VBox包装容器没有布局:
{
title: 'vbox',
iconCls: 'action',
layout: card, // or fit, etc. :)
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Vbox'
},
{
xtype: 'vbox-view'
}
]
},
但这不是很好的代码。 最好将标题栏和一些配置添加到VBoxView和HboxView定义中:
Ext.define("SenchaFiddle.view.VboxView", {
extend: 'Ext.Container',
xtype: 'vbox-view',
config: {
style: 'background-color: #0f0',
layout: 'vbox',
title: 'Vbox', // this is better place for title and iconCls :)
iconCls: 'action',
items: [
// title bar is here :)
{
type: 'titlebar',
docked: 'top',
title: 'Navigation',
},
{
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
}
]
}
});
和MainView.js中
Ext.define("SenchaFiddle.view.MainView", {
extend: 'Ext.tab.Panel',
// ...
config: {
tabBarPosition: 'bottom',
items: [
{xtype: 'hbox-view'}, // very nice code :)
{xtype: 'vbox-view'},
]
}
});
这篇关于选项卡面板中的VBox布局问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文