通过分段按钮在 Sencha Touch 的选项卡面板中切换视图

Question

我有一个用 Sencha Touch 2 创建的应用程序，我需要创建一个卡片布局，用分段按钮切换不同的视图，（遵循 MVC 概念）但它不工作..

我的看法：

config: {
    layout: 'vbox',
    items : [
      {
        xtype: 'header'
      },
      {
        xtype: 'container',
        layout: 'card',
        items: [
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'presence',
            items: [
              {
                xtype: 'surveyHeaderBrands'
              },
              {
                xtype: 'surveyEditorMatrix',
                flex : 1
              }
            ]
          },
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'auxiliaryFields',
            items: [
              {
                xtype: 'button',
                text: 'button'
              }
            ]
          },
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'profiles',
            items: [
              {
                xtype: 'button',
                text: 'button2'
              }
            ]
          },
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'photos',
            items: [
              {
                xtype: 'button',
                text: 'button3'
              }
            ]
          }
        ]
      }
    ]
  }

在控制器中，我不知道什么代码应该是正确的。我已经用 this.control 等进行了测试，但它不起作用...请提供任何线索！

谢谢

Answer 1

您可以将 ID 添加到卡片容器，然后在分段按钮侦听器上使用 setActiveItem

Ext.getCmp("yourcardcontainerid").setActiveItem()

示例：

    {
        xtype: 'container',
        layout: 'card',
        id: 'mynewid',
        items: [
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'presence',
            items: [
              {
                xtype: 'surveyHeaderBrands'
              },
              {
                xtype: 'surveyEditorMatrix',
                flex : 1
              }
            ]
          },
          {
            xtype: 'container',
            layout: 'vbox',
            itemId: 'auxiliaryFields',
            items: [
              {
                xtype: 'button',
                text: 'button'
              }
            ]
          },
        ]
    }

然后在您的分段按钮中

xtype: 'button',
handler: function()
{
    Ext.getCmp("mynewid").setActiveItem(1);
}

当然这不是完美的答案，因为我们没有使用控制器，但它解决了问题。

Answer 2

我找到了解决方案，我将 'flex:1' 添加到主容器，现在它可以正常工作了..

感谢您的帮助！

通过分段按钮在 Sencha Touch 的选项卡面板中切换视图

Switching views in a tabpanel in Sencha Touch from a segmented button

javascript

extjs

sencha-touch