[Extjs6]Ext.application设置mainView后无法修改，切换界面采用以下方法

经过测试，如果直接对Ext.application的mainView界面进行切换，是费力而效果不好。不如换一种思路解决。
首先自定义好程序显示的一个容器，我们在对这个容器的items进行操作的时候就会便利许多。

1）定义好容器 mainContainer

//MainContainer主要是用来作为程序显示主容器
Ext.define('Admin.view.main.MainContainer', {
    extend: 'Ext.Container',
    xtype: 'maincontainer',

    fullscreen:true,

    layout:'fit',

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

2）在Ext.application中指定Admin.view.main.MainContainer为mainView。

/** * The main application class. An instance of this class is created by app.js when it * calls Ext.application(). This is the ideal place to handle application launch and * initialization details. */
Ext.define('Admin.Application', {
    extend: 'Ext.app.Application',

    name: 'Admin',

    //defaultToken : 'dashboard',

    //mainView: 'Admin.view.main.Main',
    mainView: 'Admin.view.main.MainContainer',

    profiles: [
        'Phone',
        'Tablet'
    ],

    stores: [
        'NavigationTree'
    ]
});

3）然后我们想要切换当前的界面只需使用以下方式。

   console.log(this.up("maincontainer"))
   var mainContainer = this.up("maincontainer");
   mainContainer.removeAll();
   //此处以添加主界面为例
   mainContainer.add({
        xtype:"main"
   });

实现效果如下：

点击Login后切换到下面界面，这样就可以轻松实现登录界面了！！！！

转载于:https://my.oschina.net/u/3702584/blog/1547109