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

Posted 2023-02-25

【中文标题】Sencha Touch 2 MVC - 如何使用按钮切换视图

【英文标题】：Sencha Touch 2 MVC - how to switch views with button

【发布时间】：2011-10-24 23:23:44

【问题描述】：

我有这个控制器：

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

我希望在单击第一个按钮时加载第二个视图，反之亦然，当我单击第二个按钮时。看来我可以在我的按钮处理程序或控制部分添加代码 - 我会很感激两者的示例（除非它们相同），也许可以解释哪种方法最好以及为什么。

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

谢谢！！

【参考方案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
            );
        
    ,

【讨论】：

我相信可以访问“go”参数，它实际上是：btn.config.go（至少对我来说 ST 2.0.1）

@DominicWatson 这是一个早期版本。对于 ST 2.0.1，您可以创建一个按钮子类，将“go”设置为配置选项，然后在按钮上使用 .getGo()，就像所有其他配置选项一样。

【参考方案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() 也可以。

【讨论】：

我最终拆掉了 SenchaCon 应用程序 - 它为每个视图使用一个控制器，并有一个方法来销毁每个先前的视图。

这些资源是公开的吗？我也想看看，因为还没有太多关于 ST2 的文档。我仍然想知道每次销毁/创建而不是创建一次并重用是否真的更好。..

第二个。如果我们有一个真正的应用程序来剖析，那将非常有帮助

【参考方案3】：

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

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

if (xtypeToDisplay == undefined)

    xtypeToDisplay= Ext.create('Class_Name_for_that_Xtype');

【参考方案4】：

这对我有用：

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

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