sencha-touch-2 - 使用sencha touch2销毁一个视图后如何显示另一个视图

Question

我的主视图包含以下代码

items: [
            {
                xtype:'headerpage',
                docked:'top'
            },
            {  // this is the content area...
                id: 'launchscreen',
                cls : 'card',
                scrollable: true,
               xtype:'informationpage'
            },
            {
                docked:'left',
                xtype:'page1',
                store: 'page1'
            }

        ],

在商店我有 2 个按钮 page1，page2。

当我单击 page2 按钮时，它应该显示 page2 视图，我尝试了以下操作

 control: {
       '#page2id':{
                tap:function(){
                    Ext.getCmp('launchscreen').destroy();
                    Ext.Viewport.add(Ext.create('App.view.page2'));
                   // Ext.Viewport.add('App.view.Page2');
                }
            }
} 

通过使用上面的启动屏幕被破坏，但第2页没有显示在lauchscreen的位置。任何人都可以帮助我......提前谢谢。

Answer 1

目前您刚刚在 中添加了新视图viewport，您还需要使用setActiveItem来显示您的page2视图：

Ext.getCmp('launchscreen').destroy();
var page2 = Ext.Viewport.add(Ext.create('App.view.page2'));
Ext.Viewport.setActiveItem(page2); 

或者您可以使用animateActiveItem为您viewport指定动画，例如：

Ext.Viewport.animateActiveItem(page2, {type: 'slide', direction: 'right'}); 

Answer 2

向放置启动屏幕的容器添加一个 ID：

id: 'mainContainer',
items: [
            {
                xtype:'headerpage',
                docked:'top'
            },
            {  // this is the content area...
                id: 'launchscreen',
                cls : 'card',
                scrollable: true,
               xtype:'informationpage'
            },
            {
                docked:'left',
                xtype:'page1',
                store: 'page1'
            }

        ],

然后您可以将第二页添加到您的容器中：

控制器代码：

 control: {
           '#page2id':{
                    tap:function(){
                        Ext.getCmp('launchscreen').destroy();
                        var page2 = Ext.getCmp('mainContainer').add(Ext.create('App.view.page2'));
                        Ext.getCmp('mainContainer').setActiveItem(page2); 
                    }
                }
    }