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')); } } ] } });
まあ
できないことはないだろうと思ったけど、やり方がみつからなかったのでひとつの参考として。