经过测试,如果直接对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后切换到下面界面,这样就可以轻松实现登录界面了!!!!