Sencha Touch 2 MVC - 如何使用按钮切换视图

Question

我有这个控制器：

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() {
                }
            }
        });
    }
});

以及这两个视图：

    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() {
                    }
                }
            ]
        }
});

我希望在单击第一个按钮时加载第二个视图，反之亦然，当我单击第二个按钮时加载第二个视图。看来我可以在按钮处理程序或控制部分中添加代码 - 我希望能提供两者的示例（除非它们相同），并且可能解释哪种方法最好以及原因。

请注意，我不想使用卡片布局或选项卡面板 - 我想知道如何从一个独立视图切换到另一个独立视图（在我的应用程序中，我有一个卡片面板和一个选项卡面板，我需要使用按钮在两个组之间切换）

谢谢！！

Answer 1

您应该在控制器中使用 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
            });
        }
    },

Answer 2

很好的答案，但请注意，仅使用 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() 也可以工作。

Answer 3

首先我们需要检查该 xtype 是否已经创建。下面的代码将做到这一点

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

if (xtypeToDisplay == undefined)
{
    xtypeToDisplay= Ext.create('Class_Name_for_that_Xtype');
}

Answer 4

这对我有用：

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

    Ext.Viewport.setActiveItem(Ext.create('MyApp.view.TestSecond')); 
}