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

Question

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

这里更清楚这些图片。

如何在sencha中这样做，我在sencha非常新。谢谢你提前。

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等），但它只是为了给你一个适合你的概念。