CODEWITHSUNDEEP
model-view-controllerextjs4
Levi Hackwith
Levi Hackwith

Reputation: 9332

Trouble With Ext.Load Not Finding Required Files

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.

Upvotes: 0

Views: 11261

Answers (2)

Dean Moses
Dean Moses

Reputation: 2382

I got that error, too. The Ext 4.0 MVC system doesn't use bootstrap.js -- instead, use ext-debug.js. When you're ready to go to production you'll replace ext-debug.js during the compilation phase.

Your HTML file should look like this:

<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>

Upvotes: 2

Egy Mohammad Erdin
Egy Mohammad Erdin

Reputation: 3413

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.Loader is disabled by default...

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

Upvotes: 2

Related Questions