1

私は 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 (ツールバー) を適用できるようにしたいと考えています。例: ログイン、ホーム画面、詳細画面などに 1 つ。

Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]}); を使用してみました。しかし、それはうまくいきません。現在、現在レンダリングされているパネルにツールバーを追加してフルスクリーンに設定することは機能しますが、残念ながら、構造が

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

誰か提案がありますか？

4

2 に答える 2

2

プログラムでドッキングされたアイテムを追加するには、

viewport.addDocked(loginBar);

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

次に、それを再び外すための.removeDocked（）メソッドもあります。

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

于 2011-01-19T17:21:11.427 に答える
1

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

たとえば、ツールバーのボタンにこれを実行させることができます。

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

ボタンを押すとタイトルが変わります。

しかし、あなたが何をしようとしているのかがよくわかりました。動的に変更された単一のツールバーを外側のビューポートにドッキングするのではなく、個々のツールバーを各 (カード) パネルに追加することをお勧めします。そうすれば、彼らもうまく滑ります;-)

于 2011-01-20T23:39:21.963 に答える