Question

我有一个带有分段按钮的TabBar导航，它还包含一张卡片布局。一切正常。但是，我想要得到我的分段按钮以屏幕为中心。我不希望它伸展。我已经包含了主要视图并放置了所有代码 SenchaFiddle

enter image description here

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

更聪明：）

Answer 2

你可以做的是将你的分段按钮放在一个带有间隔物的环绕声的hbox布局中：

Ext.define('SenchaFiddle.view.SegView', {
  extend: 'Ext.Container',
  xtype: 'seg-view',

  config: {
    layout: 'fit',
    items: [
    {
      layout: 'vbox',
      items: [{
        xtype:'container',
        layout:'hbox',
        items:[{xtype:'spacer'},
        {
          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.getCmp('card-container').setActiveItem(1);

            }
          },
          {
            text: 'Option 3',
            handler: function() {
              Ext.getCmp('card-container').setActiveItem(2);
            }
          }
          ]
          },{xtype:'spacer'}]},
          {
            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'

            }
            ]
          }
          ]
        }

        ]
      }
});

希望这有帮助

在容器中居中分段按钮？

2 个答案: