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');
                }
            }
}

通过使用上面的启动画面被破坏，但是page2没有显示在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); 
                    }
                }
    }

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

2 个答案: