I’m trying to learn the new MVC architecture that ExtJS 4 is using and I’m having some serious issues. Here’s what I get when I load the page (Chrome JS console):
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
And here’s a breakdown of my code:
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>
Now, I know that the included controller script is commented out. When I explicitly include the controller this message goes away. The reason I am asking about this is because I thought Ext.loader was supposed to take care of loading the required files for me.
The Users Controller
Ext.define('Exercise.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
The Users Model
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'
}
});
The User View
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);
}
});
The app.js File
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'
}
]
});
}
});
Side note: I’ve tried the solution found here to no avail and I’ve tried setting my apps appFolder property to both ../app and just app.
Thanks for the help with this.
have you read my question ?? how to make a "MVC Application" with extjs 4.0 beta 3?.. (it should works with final release )
it’s because
Ext.Loaderis disabled by default…