将分段按钮居中放置在容器中？ [英] Centering segmented button in container?

问题描述

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

更聪明：)

这篇关于将分段按钮居中放置在容器中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！