sencha-touch-2 - 如何使用侧边栏选项卡按钮在 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 等），但它只是为了让您了解这里应该为您工作的概念。