Я пытаюсь изучить новую архитектуру MVC, которую использует ExtJS 4, и у меня возникли серьезные проблемы.Вот что я получаю, когда загружаю страницу (консоль Chrome JS):
ext-all-debug.js:3713[Ext.Loader] Synchronously loading 'Exercise.controller.Users'; consider adding Ext.require('Exercise.controller.Users') above Ext.onReady
ext-all-debug.js:4757An uncaught error was raised with the following data:
ext-all-debug.js:4758
Object
ext-all-debug.js:4764Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Exercise.controller.Users
ext-all-debug.js:4771Uncaught Error
А вот код моего кода:
index.php
<html>
<head>
<title></title>
<style>
@import url('libraries/extjs/resources/css/ext-all.css');
</style>
<script src = "libraries/extjs/bootstrap.js"></script>
<!--
<script src = "public/app/controller/Users.js"></script>
-->
<script src = "public/app/app.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>
Теперь я знаю, что включенный скрипт контроллера закомментирован.Когда я явно включаю контроллер, это сообщение исчезает.Причина, по которой я спрашиваю об этом, заключается в том, что я думал, что Ext.loader должен был позаботиться о загрузке необходимых мне файлов.
Контроллер пользователей
Ext.define('Exercise.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
Модель пользователя
Ext.define('Exercise.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'created_at',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}, {
name: 'member_id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
}, {
name: 'last_name',
type: 'string'
}, {
name: 'password',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'email_address',
type: 'string'
}, {
name: 'is_active',
type: 'int'
}],
proxy: {
type: 'ajax',
format: 'json',
url: '../../_dev/json_fixtures/users.json',
reader: {
type: 'json',
root: 'users'
},
root: 'users'
}
});
Вид пользователя
Exercise.views.user.list = Ext.extend(Ext.grid.Panel, {
store: Exercise.stores.users,
renderTo: Ext.getBody(),
columns:[{
header: 'Member ID',
dataIndex: 'member_id'
}, {
header: 'First Name',
dataIndex: 'first_name'
}, {
header: 'Last Name',
dataIndex: 'last_name'
}],
initComponent: function() {
Exercise.stores.users.load();
Exercise.views.UsersList.superclass.initComponent.apply(this, arguments);
}
});
Файл app.js
Ext.application({
name: 'Exercise',
autoCreateViewport: true,
appFolder: 'app',
controllers: [
'Users'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Примечание: я попытался найти решение здесь безрезультатно, и я попытался установить для свойства apps appFolder значение ../app и просто app.
Спасибо за помощь в этом.