Sencha touch 在容器中对中分段按钮？

我有一个带有分段按钮的选项卡栏导航，它还包含一张卡 布局。一切正常。然而，我正试图得到我的 屏幕中央的分段按钮。我不想让它伸展。我已经包含了主要视图并将所有代码放在

Ext.define（'senchabiddle.view.SegView'{ 扩展：“Ext.Container”， xtype:“分段视图”， 配置：{ 布局：“适合”， 项目：[ { 布局：“vbox”， 项目：[ { xtype:“segmentedbutton”， allowDepress:对， 项目：[ { 文本：“选项1”， 答:对,， 处理程序：函数（）{ 控制台日志（“拾取的1”）； Ext.getCmp（'card-container'）.setActiveItem（0）； } }, { 文本：“选项2”， 处理程序：函数（）{ 外部消息警报（“foo”）； Ext.getCmp（'card-container'）.setActiveItem（1）； } }, { 文本：“选项3”， 处理程序：函数（）{ Ext.getCmp（'card-container'）.setActiveItem（2）； } } ] }, { xtype:'容器'， 弹性：10， id:'卡容器'， 布局：{ 类型：“卡片” }, 项目：[ { xtype:'option-view1'， 样式：“背景色：#fff” }, { html:'bar'， 样式：“背景色：#666” }, { html:'baz'， 样式：“背景色：#333” } ] } ] } ] } }); Ext.define（'senchabiddle.view.MainView'{ 扩展：“Ext.tab.Panel”， xtype:“测试视图”， id:“测试视图”， 配置：{ tabbar位置：'bottom'， 布局：{ 键入：“卡”， 动画：{ 持续时间：300， 放松：“放松进入”， 键入：“幻灯片”， 方向：“左” } }, 全屏：对， 项目：[ { 标题：“表1”， iconCls:'信息'， xtype:'面板'， 布局：{ 类型：“适合” }, 项目：[ { 标题：“标题1”， xtype:'工具栏'， 停靠：“顶部” }, { id:“图像选项卡”， html:“正在加载foo…” }, { xtype:“分段视图”， 布局：“适合” } ] }, { 标题：“表2”， iconCls:“行动”， 项目：[ { 标题：“标题2”， xtype:'工具栏'， 停靠：“顶部” }, { id:“新闻选项卡”， html:“加载栏…” } ] } ] } });

---

您可以将分段按钮放置在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'

            }
            ]
          }
          ]
        }

        ]
      }
});

---

希望这有帮助

你可以使用

布局：{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'},
                    ...

---

更智能的：）

注意到“加载”消息与segmentedbutton位于同一行吗？我想在上面再放几行信息。我如何才能让按钮显示在消息下方？顺便问一下，有没有一种简单的方法可以复制SenchaFIDLE，这样我就可以显示原始版本的其他更改？我不太喜欢SenchaFIDLE，所以我不知道。如果你想在分段按钮上方放置一些东西，比如“加载”消息，只需将Vbox容器放在分段按钮之前，而不是选项卡面板项的html属性中，我想您的答案会更好一些。我把你们两个都投了赞成票，给了你们支票。

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'

            }
            ]
          }
          ]
        }

        ]
      }
});

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