Question

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

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

我的代码如下;

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

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

但是，当我点击屏幕A中的按钮时，我导航到屏幕B，屏幕A上也出现了屏幕A.我需要摆脱屏幕A（用户点击按钮后仅显示屏幕B）

===================== 更新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);        
    }

});

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

1 个答案: