Untitled

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

<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.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);
    }
});

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'
                }
            ]
        });
    }
});

Ext.Loader.setConfig({enabled:true});

<html>
    <head>
        <title></title>
        <style>
            @import url('libraries/extjs/resources/css/ext-all.css');
        </style>
        <!-- The MVC system needs ext-debug.js, not bootstrap.js -->
        <script src = "libraries/extjs/ext-debug.js"></script>
        <script src = "public/app/app.js"></script>
        <script>
        </script>
    </head>
    <body>

    </body>
</html>