ビューポートSencha Touchで条件ツールバーを適用する

Question

ImはSenchaでMVCルートに行きます。私は、ビューポートパネルは、Twitterの例のように多くを初期化しています

/** 
* @author Jeff Blake 
*/ 
Ext.regApplication('App', { 
defaultTarget: 'viewport', 
defaultUrl : 'Viewport/index', 
name   : 'App', 
icon   : "mobile/public/resources/images/icon.png", 
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png", 
//useHistory : false, 
//useLoadMask : true, 

launch: function() { 
    Ext.Viewport.init(); 
    Ext.Viewport.onOrientationChange(); 

    this.viewport = new App.Viewport({ 
     application: this 
    }); 

    Ext.dispatch({ 
     controller: 'User', 
     action : 'index' 
    }); 
} 
}); 

/** 
* @class App.Viewport 
* @extends Ext.Panel 
* This is a default generated class which would usually be used to initialize your  application's 
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly. 
*/ 
App.Viewport = Ext.extend(Ext.Panel, { 
id  : 'viewport', 
layout : 'card', 
fullscreen: true, 
cardSwitchAnimation: 'slide', 

initComponent: function() { 

    Ext.apply(this, { 

     dockedItems: [ 
      { 
       // Top Bar 
       dock : 'top', 
       xtype : 'toolbar', 
       title : 'Whats Good', 
       items: [ 
        { 
         text: 'About' 
        }, 

       ] 
      } 


     ] 
    }); 


App.Viewport.superclass.initComponent.apply(this, arguments); 
} 

}); 
Ext.reg('App.Viewport', App.Viewport); 

新しいコード：

if (!App.viewport.getDockedComponent(homeBar)) { 
     var homeBar = new App.HomeBar(); 
     App.viewport.addDocked(homeBar); 
    } 

を私は条件付きでDockedItems（ツールバー）を適用することができるようにしたい現在レンダリングされたパネルのタイプに基づいて、ビューポートに表示されます。 EG：ログイン、ホーム画面、詳細画面など。

私はExt.apply（App.Viewport、{dockedItems：[App.LoginBar]}）を試してみました。 しかし、それは動作しません。現在、それは現在レンダリングパネルにツールバーを追加するために動作し、フルスクリーンに設定するが、構造が

Panel 
Toolbar 
    Panel 
    Toolbar 
    /end Panel 
/end Panel 

誰もが提案を持っていますか？あるとして、残念ながら遷移し、物事は不気味に振る舞いますか

Answer 1

アプリケーションのビューポートへの参照を取得するには、「アプリケーション」名前空間を使用します。この名前空間は、regApplication設定のnameプロパティによって自動的に作成されます。

つまり、あなたのツールバーのボタンは、例えば、この操作を行う作ることができる：あなたがボタンを押したときにタイトル変更になるだろう

{ 
    text: 'About', 
    handler: function() { 
     App.viewport.getDockedItems()[0].setTitle('Pressed!'); 
    } 
}, 

を。

しかし、今私はそれがあなたがやろうとしていることを理解しています。動的に変更された単一のツールバーを外側のビューポートにドッキングしないで、個々のツールバーをそれ。そういうわけで、彼らはうまく滑ります;-)

Answer 2

プログラムでドッキングされた項目を追加するために、私はこのような

viewport.addDocked(loginBar); 

方法は、コンポーネントの元の構成を更新しようとしているよりもはるかに優れている使用することをお勧めします。

さらに、.removeDocked（）メソッドを使用してもう一度オフにすることもできます。

また、コンポーネントのインスタンスを扱っていて、クラスを更新しようとしていないことを確認してください。