我目前正在开发一个 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>
登录页面控制器 ->
// JavaScript Document
Ext.define('nSpace.controller.studentAssessmentController', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
views: [
'login.loginView'
],
model: 'loginModel',
init: function() {
this.control({
"#loginButton": {
click: this.onLoginButtonClick
}
});
},
onLoginButtonClick: function(){
//Unable to GET HERE
alert('hi')
var store = this.getUsersStore();
var logUserName = Ext.getCmp('UserName').getValue();
var logPassword = Ext.getCmp('Password').getValue();
//console.log(store.data.items[0].data.loginusername)
//console.log(store.data.items.length)
for (var i=0;i<store.data.items.length;i++)
{
if(i+1 == store.data.items.length)
{
alert('Please check your username and password.')
}
else if (logUserName === store.data.items[i].data.loginusername && logPassword === store.data.items[i].data.password)
{
if(logUserName.indexOf("student") != -1)
{
alert('Student');
//var element = Ext.get('teacherContainer');
//element.hide();
break;
}
else if(logUserName.indexOf("teacher" != -1))
{
alert('Teacher');
break;
}
}
}
}
});
app.js->
// 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', {
});*/
}
});
我也通过功能正确地获得了页面上的所有视图，但是我的 onLoginButtonClick 没有触发显示和隐藏各自的 div（教师和学生模块 div 在各自的登录名上）。有什么想法我哪里出错了吗？或者，如果有人能告诉我应该怎么做才能实现整洁的集成，那会有所帮助。