4

我有一个带有分段按钮的 TabBar 导航，其中还包含卡片布局。一切正常。但是，我试图让我的分段按钮在屏幕上居中。我不想让它伸展。我已经包含了主要视图并将所有代码放在 SenchaFiddle

在此处输入图像描述

在此处输入图像描述

Ext.define('SenchaFiddle.view.SegView', {
    扩展：'Ext.Container'，
    xtype: 'seg-view',

    配置：{
        布局：'适合'，
        项目： [
            {
                布局：'vbox'，
                项目： [
                    {
                        xtype: '分段按钮',
                        允许压抑：真，
                        项目： [
                            {
                                文本：'选项 1'，
                                按下：真的，
                                处理程序：函数（）{
                                    console.log("选中 #1");
                                    Ext.getCmp('card-container').setActiveItem(0);
                                }
                            },
                            {
                                文本：'选项 2'，
                                处理程序：函数（）{
                                    Ext.Msg.alert("foo");

                                    Ext.getCmp('card-container').setActiveItem(1);
                                }
                            },
                            {
                                文本：'选项 3'，
                                处理程序：函数（）{
                                    Ext.getCmp('card-container').setActiveItem(2);
                                }
                            }
                        ]
                    },
                    {
                        xtype: '容器',
                        弯曲：10，
                        id: '卡片容器',
                        布局： {
                            类型：'卡'
                        },
                        项目： [
                            {
                                xtype: 'option-view1',
                                风格：'背景颜色：#fff'
                            },
                            {
                                html: '酒吧',
                                风格：'背景颜色：＃666'

                            },
                            {
                                html: '巴兹',
                                风格：'背景颜色：＃333'

                            }
                        ]
                    }
                ]
            }

        ]
    }
});

Ext.define('SenchaFiddle.view.MainView', {
    扩展：'Ext.tab.Panel'，
    xtype: '测试视图',
    id: '测试视图',

    配置：{
        tabBarPosition:'底部',
        布局： {
            类型：'卡'，
            动画片： {
                持续时间：300，
                easing: '缓入出',
                类型：'幻灯片'，
                方向：“左”
            }
        },
        全屏：是的，

        项目： [
            {
                标题：'Tab1'，
                iconCls: '信息',
                xtype：'面板'，
                布局： {
                    类型：“适合”
                },
                项目： [
                    {
                        标题：'标题 1'，
                        xtype: '工具栏',
                        停靠：'顶部'
                    },
                    {
                        id: '图片标签',
                        html: '正在加载 foo...'
                    },
                    {
                        xtype: 'seg-view',
                        布局：“适合”
                    }
                ]
            },
            {
                标题：'Tab2'，
                iconCls: '动作',
                项目： [
                    {
                        标题：'标题 2'，
                        xtype: '工具栏',
                        停靠：'顶部'
                    },
                    {
                        id: '新闻标签',
                        html: '加载栏...'
                    }
                ]
            }
        ]
    }
});
4

2 回答 2

7

只是你能用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'},
                    ...

更聪明:)

于 2012-06-07T19:53:17.567 回答
1

你可以做的是把你的分段按钮放在一个带间隔的 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'

            }
            ]
          }
          ]
        }

        ]
      }
});

希望这可以帮助

于 2012-06-07T18:55:53.040 回答