本文介绍了将分段按钮居中放置在容器中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有分段按钮的TabBar导航，其中还包含一张卡布局。一切都运行得很好。然而，我正在努力让我的屏幕居中的分段按钮。我不想让它伸展。我已经包含了主视图，并将所有代码放在SenchaFiddle
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
Ext.getCmp('card-container').setActiveItem(0);
}
},
{
text: 'Option 2',
handler: function() {
Ext.Msg.alert("foo");
Ext.getCmp('card-container').setActiveItem(1);
}
},
{
text: 'Option 3',
handler: function() {
Ext.getCmp('card-container').setActiveItem(2);
}
}
]
},
{
xtype: 'container',
flex: 10,
id: 'card-container',
layout: {
type: 'card'
},
items: [
{
xtype: 'option-view1',
style: 'background-color: #fff'
},
{
html: 'bar',
style: 'background-color: #666'
},
{
html: 'baz',
style: 'background-color: #333'
}
]
}
]
}
]
}
});
Ext.define('SenchaFiddle.view.MainView', {
extend: 'Ext.tab.Panel',
xtype: 'test-view',
id: 'test-view',
config: {
tabBarPosition:'bottom',
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-in-out',
type: 'slide',
direction: 'left'
}
},
fullscreen: true,
items: [
{
title: 'Tab1',
iconCls: 'info',
xtype: 'panel',
layout: {
type: 'fit'
},
items: [
{
title: 'Title 1',
xtype: 'toolbar',
docked: 'top'
},
{
id: 'image-tab',
html: 'Loading foo...'
},
{
xtype: 'seg-view',
layout: 'fit'
}
]
},
{
title: 'Tab2',
iconCls: 'action',
items: [
{
title: 'Title 2',
xtype: 'toolbar',
docked: 'top'
},
{
id: 'news-tab',
html: 'Loading bar...'
}
]
}
]
}
});
推荐答案
你能不能用layout:{pack:'center'}试着把你放在allowDepress: true之后，玩得开心！居中。
就像这样：
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
layout: {pack:'center'},
...
更聪明：)
这篇关于将分段按钮居中放置在容器中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！