在容器中居中分段按钮？

Question

我有一个带有分段按钮的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...'
                    }
                ]
            }
        ]
    }
});

Answer 1

你可以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'},
                    ...

更聪明 :)