私は現在、3 つのモジュールに基づいて HTML ファイルを構築した ExtJS プロジェクトに取り組んでいます。
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 の下のアプリ フォルダー内に、すべてのコントローラー、ビュー、データ、ストア、モデルがあります。
extjs ファイルが 3 回読み込まれるのを避けるために、3 つの html をすべて 1 つに統合する必要があります。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) の表示と非表示をトリガーしません。私が間違っているアイデアはありますか？または、適切な統合のために何をすべきかを誰かが教えてくれれば、それは役に立ちます。