Sencha Touch 2 でパネルごとの画面遷移をつくる話

Ext.Panel や Ext.tabPanel や Ext.navigation.View の画面遷移はサンプルにある

まあそれっぽくボタンをおしたりするとなんだかアニメーションして画面遷移してくれる。ありがたいことです。
本家ドキュメント::Touch 2.1 - Sencha Docs
サンプル::Kitchen Sink

画面全体を遷移させる

本題。上記のような画面遷移はわかったけど、たとえば初回起動時のビューであるとか使い捨てるような画面をつくらなくてはならない、タブメニュー画面に表示する前に別の画面を表示させたいという時がある。そういうときどうすればいいか。

結論としては、とりあえず Ext.Viewport をさがしてみたところなんとなく Ext.Viewport.removeAll() で全体をクリアできるようだったのでそれでクリアしてもう一度 Ext.Veiwport.add(Ext.create('MyApp.view.HogeView')) とすることにした。以下簡単なサンプル。

// なんらかのパネルを定義
Ext.define('MyApp.view.HogeView', {
    extend: 'Ext.Panel',

    requires: [
        'Ext.Label',
    ],

    config: {
        fullscreen: true,
        scrollable: true,

        items: [
            {
              xtype: 'label',
              html: 'なんか',
            },
            {
              xtype: 'button',
              text: 'つぎのパネルへ',
              handler: function () {
                  Ext.Viewport.removeAll();
                  Ext.Viewport.add(Ext.create('MyApp.view.MogeView'));
              }
            }
        ]
    }
});

まあ

できないことはないだろうと思ったけど、やり方がみつからなかったのでひとつの参考として。