I've got a TabBar nav with a segmentedbutton that also contains a card layout. Everything works fine. However, I'm trying to get my segmentedbutton centered on the screen. I don't want it to stretch. I've included the main views and placed all the code on 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...'
}
]
}
]
}
});
