11

私はこのコントローラーを持っています：

Ext.define('MyApp.controller.Test', {
    extend: 'Ext.app.Controller',

    config: {

    },

    refs: [
        {
            ref: 'first',
            selector: '#first'
        },
        {
            ref: 'second',
            selector: '#second'
        }
    ],

    views : [
        'TestMain',
        'TestSecond'
    ],

     init: function() {
          this.getTestMainView().create();


        this.control({
            '#first': {
                tap: function() {
                    //how do I go to second view here?
                }
            },
            '#second': {
                tap: function() {
                }
            }
        });
    }
});

およびこれらの 2 つのビュー:

    Ext.define('MyApp.view.TestMain', {
    extend: 'Ext.Container',
    xtype: 'testmain',

    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
         items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'first',
                    text: 'Go To Second Screen',
                    handler: function() {

                        //how do I go to second view here?
                    }
                }
            ]
        }
});

...

    Ext.define('MyApp.view.TestSecond', {
    extend: 'Ext.Container',
    xtype: 'testsecond',

    config: {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
        items: [
                {
                    xtype: 'button',
                    ui: 'normal',
                    id: 'second',
                    text: 'Go To First Screen',
                    handler: function() {
                    }
                }
            ]
        }
});

最初のボタンをクリックすると 2 番目のビューが読み込まれ、2 番目のボタンをクリックするとその逆が読み込まれます。ボタンハンドラーまたはコントロールセクションのいずれかにコードを追加できるようです-両方の例（同じでない限り）と、どちらの方法が最適で、その理由についての説明をいただければ幸いです。

カード レイアウトやタブパネルを使用したくないことに注意してください - あるスタンドアロン ビューから別のビューに切り替える方法を知りたいです (私のアプリにはカード パネルとタブ パネルがあり、ボタンを使用して両方のグループを切り替える必要があります)。

ありがとう！！

4

4 に答える 4

13

ハンドラーの代わりにthis.control、コントローラーで使用する必要があります。

this.control({
    '#first': {
        tap: function() {
            Ext.Viewport.add({
                xtype: 'testsecond'
            });
        }
    },

handlers:(ビュー定義のボタンからドロップできます)

また、最初から ID をハードコードするべきではありません。

このようなボタンを処理する方法は次のとおりです。

items: [
            {
                xtype: 'button',
                ui: 'normal',
                text: 'Go To First Screen',
                go: 'testsecond'
            },
       ...

次に、すべてのビューに適用されるベース コントローラーで、次のようなことを行います。

this.control({
    'button[go]': {
        tap: function(btn) {
            Ext.Viewport.setActiveItem({
                xtype: btn.go
            });
        }
    },
于 2011-10-28T10:54:40.343 に答える
7

素晴らしい答えですが、xtype だけで setActiveItem() を呼び出すと、既に作成されているビューを再利用するのではなく、新しいビューが作成されることに注意してください。Ext.ComponentQuery最初にターゲットを取得してから setActiveItem を使用することになりました。コードは次のとおりです。

this.control({
        'button[go]': {
                tap: function(btn) {
                    viewport = Ext.ComponentQuery.query('my-custom-viewport-xtype');
                    target = Ext.ComponentQuery.query(btn.go);
                    viewport[0].setActiveItem(target[0]);
                }
            }
    });

また、スライド効果などを追加するためにカスタム ビューポートを使用していますがExt.Viewport.setActiveItem()、前の例のように直接呼び出すこともできます。

于 2011-11-11T00:15:25.737 に答える
1

まず、そのxtypeがすでに作成されているかどうかを確認する必要があります。次のコードはそれを行います

var xtypeToDisplay = Ext.ComponentQuery.query(btn.go)[0];

if (xtypeToDisplay == undefined)
{
    xtypeToDisplay= Ext.create('Class_Name_for_that_Xtype');
}
于 2012-03-15T08:57:34.203 に答える
1

これは私のために働いた：

handler: function() {
    //how do I go to second view here?

    Ext.Viewport.setActiveItem(Ext.create('MyApp.view.TestSecond')); 
}
于 2013-11-25T22:31:43.273 に答える