extjs - 按钮单击导航到另一个视图

Question

我有一个按钮，当用户单击它时，我需要显示不同的视图/页面（导航到不同的视图）。

例如，屏幕 A 有一个按钮，当我单击该按钮时，我需要导航到屏幕 B。

我的代码如下；

onLoginSuccess : function(){
Ext.create('Ext.container.Viewport', {

                    items: [
                    {
                        xtype: 'screenb'
                    }
                    ]
                });
}

但是，这是什么原因，当我单击屏幕 A 中的按钮时，我导航到屏幕 B，屏幕 A 也出现在屏幕 B 上。我需要摆脱屏幕 A（在用户单击按钮并仅显示屏幕后二）

=====================更新 2 =========================== =============

Ext.define('Proj.view.loca.Person' ,{
    extend: 'Ext.form.Panel', 
    alias : 'widget.person',

    items: [

            {
        xtype: 'textfield',
        fieldLabel: 'Name',
        name: 'name'
    }, {
        xtype: 'textfield',
        fieldLabel: 'School',
        name: 'school'
      }],
    buttons: [{
        text: 'Submit',
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                    Ext.create('Ext.container.Viewport', {

                    items: [
                    {
                        xtype: 'screenb'
                    }
                    ]
                });

                    },
                    failure: function(form, action) {
                    // Navigate to some other view
                    }
                });
            }
        }
    }]
});

Answer 1

我认为实现这一目标的最佳方法是使用卡片布局。

大致是这样完成的：

Ext.application({
    name: 'BS',

    appFolder: 'app',

    refs:
    [{
        ref: 'viewport',
        selector: 'viewport'
    }],

    launch: function() {

        Ext.create('Ext.container.Viewport', {
            layout: 'card',
            items: [{
                xtype: 'panel',
                id: 'panel1',
            },{
                xtype: 'panel',
                id: 'panel2',        
            }]
        });
    },


    onLoginSuccess : function() {
        this.getViewport().getLayout().setActiveItem(1);        
    }

});