sencha-touch - Sencha Touch: アイテムを削除し、向きの変更などでビューを更新する

Question

返信ありがとうございます。プレーンでシンプルな形の新しいビューを作成しました。下記参照：

  var homePanelTop = new Ext.Panel({    id:'topCont',
      cls:'topCont'    
  });
  var homePanelBtm = new Ext.Panel({
      id:'btmCont',
      cls:'btmCont'
  });


  App.views.HomeIndex = Ext.extend(Ext.Panel, {
          id:'mainlayout',
          fullscreen : true,
          layout: {
                      type: 'vbox',
                      align: 'stretch',
              },
              defaults:{flex:1},
           items: [homePanelTop, homePanelBtm],
           suspendLayout: true,
              monitorOrientation: true,
              orientationchange: this.onOrientationChange,
              onOrientationChange: function(orientation, w, h){
                  this.suspendLayout = false;
                   if(orientation === 'portrait'){
                           console.log('P: ' + orientation);
                              this.add(homePanelTop, true);
                          } else {
                           console.log('L: ' + orientation);
                              this.remove(homePanelTop, false);
                      }
                      this.doLayout();
              }
  });
  Ext.reg('HomeIndex', App.views.HomeIndex);

上記のビューで期待するのは、最初のロードと縦向きで、上部パネル (黄色) と下部パネル (青色) の 2 つのパネルがあります。通常どおり回転すると、同じ効果が得られます。

しかし、私が求めているのは、横向きに回転すると、上部パネル (黄色) が削除され、下部パネル (青色) が残りのスペースを埋めることです。

次に、縦向きに戻すと、両方のパネルがデザインサイズに戻ります (flex:1)。

上記のコード (クロムでのテスト) を使用して何が起こっているかというと、上部パネル (黄色) が上部に残っていますが、高さがわずかに小さく、本来のように消えません。

とにかく、私が持っている 2 つのコンソールトレースコマンドに注意してください。これらは、ローテーションで次の読み取り値を示しています。

最初の読み込み後、横向きに回転すると、出力は次のようになります。

L: 風景