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

Question

大家好，

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

我需要制作一个如图所示的 UI。当按下侧栏中的按钮时，右侧的视图会发生变化。侧边栏也可以隐藏。

ST2 有什么方法可以在运行时在容器中添加另一个视图，就像在 ios 中我们使用“[self.view addSubView:tV_coverage_view]？

例如，如果用户按下“TV Coverage”按钮，我应该创建一个“TV_Coverage_View”实例并将其添加到右侧容器中。而“TV_Coverage_Controller”将处理该视图中的所有内容。

我应该为左侧按钮面板和右侧使用哪种容器。

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

Answer 1

对于左右部分，您应该使用 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 应用程序，理解布局概念非常重要。请参阅煎茶指南。

现在要在右侧页面之间切换，请使用 add() 和 animateActiveItem() 函数。