如何使用侧边栏选项卡按钮在 sencha 中调用某些视图

Question

我喜欢网站，侧边菜单。这是不同的菜单项，如果单击一个选项卡然后在下一个视图中显示相关信息，我想显示。如果再次单击下一个按钮显示在同一视图中。只有更改按钮视图是相同的。

这里更清楚这些图像。

如何在煎茶中做到这一点，我是煎茶的新手。提前谢谢。

Answer 1

您将希望对主体使用卡片布局。在此处查看文档：http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card

对于侧边导航，您可以使用简单的组件，通过组件元素上的侦听器来更改卡片布局的活动项（例如，为元素使用singletap 事件：http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap）。

items: [{
    items: [
        {
            html: 'Student',
            listeners: {
                initialize: function(cmp) {
                    cmp.element.on('singletap', function() {
                        Ext.getCmp('myCardLayout').setActiveItem(1);
                    }
                }
            }
        },
        {
            html: 'Teacher',
            listeners: {
                initialize: function(cmp) {
                    cmp.element.on('singletap', function() {
                        Ext.getCmp('myCardLayout').setActiveItem(2);
                    }
                }
            }
        }
    ]
},
{
    id: 'myCardLayout',
    layout: 'card',
    items: [
        {
            //student panel
        },
        {
            //teacher panel
        }
    ]
}]

请注意，这是非常草率的代码（它不是 MVC，它使用 Ext.getCmp 等），但它只是为了让您了解这里应该为您工作的概念。