sencha-touch-2 - sencha touch2を使用して1つのビューを破棄した後、別のビューを表示する方法

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

        ],

ストアには、ページ 1、ページ 2 の 2 つのボタンがあります。

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 が表示されません。

Answer 1

現在、新しいビューを に追加したばかりviewportです。また、setActiveItempage2を使用してビューを表示する必要があります。

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

        ],

次に、2 番目のページをコンテナーに追加できます。

コントローラーコード:

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