Login 在第一个面板中单击按钮后，在同一选项卡面板中打开另一个视图

我有一个主视图，在其中我创建了三个选项卡，单击“登录”选项卡打开登录表单 登录成功后，我需要在同一登录选项卡面板中加载另一个视图。我使用了以下代码行加载视图，但它没有在同一选项卡面板中打开视图，而是作为独立视图加载。如何在同一选项卡面板中打开它

应用程序的主要视图

Ext.define("SenchaTest.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',


    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                },



                {
                title: 'Log In',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'card',
            id:"loginForm",
                items: [
                    {
                        xtype: 'fieldset', 
            title: 'Log In',    
            id:"submitForm",                        
                        instructions: 'Enter username and password to login.',
                        defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '45%'
                    },
            items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        label: 'User Name',
            allowBlank:false, 
                        useClearIcon: true              
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        label: 'Password',
            allowBlank:false, 
                        useClearIcon: false

                    },{
                            xtype: 'button',
                            text: 'Submit',
                            ui: 'confirm',
                        id: 'btnSubmitLogin'
                            //  this.up('formpanel').submit();
                            }]

                    }  

                ]
            }

        ]
    }
});

登录登录后要加载的视图

Ext.define("SenchaTest.view.Landing", {
    extend: "Ext.Container",
    xtype: 'landingScreen',
    requires: [
        "SenchaTest.view.Main"       
    ],
    config: {
        html: "Welcome to my app"  
    }
});

我用过

Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing')); 

加载登录视图，但它不加载在同一选项卡中，而是作为独立页面加载。

---

请帮忙

以下代码允许您使用“替换”功能扩展Sencha Touch，该功能允许您在同一面板内动态交换两个视图组件。我相信这就是您正在尝试的操作：

不推荐的另一种解决方案是创建第三个但隐藏的选项卡面板“登录”，然后在成功登录时创建并显示它，同时隐藏登录选项卡面板

Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));