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

Question

大家好，

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

我需要制作这张照片中的用户界面。在侧栏中按下按钮时，右侧的视图会发生变化。侧栏也可以隐藏。

在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应用程序，理解布局概念非常重要。请咨询sencha指南。

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