Extjs 选项卡面板内部的不同视图-Sencha touch 2

大家好,

我是ST2新手，如果这是一个非常愚蠢的问题，我很抱歉

我需要做一个用户界面，如图所示。当按下侧栏中的按钮时，右侧的视图将发生变化。侧栏也可以隐藏

ST2中是否有任何方法可以在运行时在容器中添加另一个视图，就像我们在ios中使用的“[self.view addSubView:tV\u coverage\u view]”一样

例如，如果用户按下“电视覆盖率”按钮，我应该创建一个“电视覆盖率视图”的实例，并将其添加到右侧容器中，“电视覆盖率控制器”将处理该视图中的所有内容

左侧按钮面板和右侧按钮应使用何种容器

---

一点代码示例会很有帮助。

对于左右部分，您应该使用hbox容器。例如：

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            width : 250
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 1,
            layout : 'card'
        }
    ]
});

现在，因为您需要右侧的多个面板，所以您需要一个卡布局作为父级。因此，第二个面板。对于任何sencha应用程序，了解布局概念都非常重要。请参阅sencha指南

---

现在，要在右侧页面之间切换，请使用add（）和AnimateActivItem（）函数。

对于左侧和右侧部分，应使用hbox容器。例如：

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            width : 250
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 1,
            layout : 'card'
        }
    ]
});

现在，因为您需要右侧的多个面板，所以您需要一个卡布局作为父级。因此，第二个面板。对于任何sencha应用程序，了解布局概念都非常重要。请参阅sencha指南

---

现在，要在右侧页面之间切换，请使用add（）和AnimateActivItem（）函数。

“没有愚蠢的问题！除了一个可能没有被问到的问题“没有愚蠢的问题！可能除了一个不问的问题”