如何将基于不同模块的MVC模式构建的html文件集成到一个html文件中？

我目前正在从事一个ExtJS项目，我已经基于三个模块构建了我的HTML文件

1. Login Module - Login Page,
2. Teacher Module - Teacher Home Page,
3. Student Module - Student Home Page.

我的文件结构如下所示：

SAR
-student.html,
-teacher.html,
-login.html and their respective main js files in this SAR folder

在SAR下的一个应用文件夹中，我有我所有的控制器、视图、数据、商店和模型

我需要将所有三个html集成到一个中，以避免三次加载extjs文件。MVC模式确实令人困惑。当我集成时，我的一些功能不起作用

login.html有：

    <div id="login-Container"></div>

    <div id="teacherContainer">
        <div id="teacherHome"></div>
        <div id="teacherHomeChart"></div>
    </div>


    <div id="studentContainer">
        <div id="studentHome"></div>
        <div id="studentHomeChart"></div>
    </div>

---

我的页面上的所有视图都使用了这些功能，但我的onLoginButtonClick不会触发以显示和隐藏相应的div（教师和学生模块在各自的登录上的div）。知道我哪里出错了吗？或者，如果有人能告诉我，为了实现整洁的集成，应该做些什么，那会有所帮助

在登录控制器中，视图的权限声明为：

views: [
    'loginView'
],  

---

你确定你的js代码语法正确吗？我懂了；和）在这里或那里失踪。不正确的代码将无法运行。您是否使用js调试器帮助查找任何隐藏的错误？大多数现代浏览器都有一些内置调试器或要安装的插件。是的。我用的是Chrome的最新版本。我在运行文件时没有看到任何语法错误。工作正常。但代码不会进入我的控制器。

// JavaScript Document
Ext.Loader.setConfig({ 
 enabled: true
 });
Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'nSpace',
    controllers: [
        'studentAssessmentController'
    ],
    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Container', {
                    renderTo: 'login-Container',
                    items: {
                        cls: 'loginView',
                        xtype: 'loginView'
                    }
                   });
       /* Ext.create('Ext.container.Viewport', {       

        });*/
    }
});

views: [
    'loginView'
],