0

我正在尝试学习 ExtJS 4 正在使用的新 MVC 架构，但我遇到了一些严重的问题。这是我加载页面时得到的结果（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

这是我的代码的细分：

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

旁注：我尝试了此处找到的解决方案无济于事，并且尝试将我的应用程序appFolder属性设置为 both../app和 just app。

感谢您对此的帮助。

4

2 回答 2

2

你读过我的问题吗？？如何使用 extjs 4.0 beta 3 制作“MVC 应用程序”？..（它应该适用于最终版本）

这是因为Ext.Loader默认禁用...

Ext.Loader.setConfig({enabled:true});
于 2011-05-06T06:25:06.357 回答
2

我也遇到了这个错误。Ext 4.0 MVC 系统不使用 bootstrap.js，而是使用 ext-debug.js。当您准备好投入生产时，您将在编译阶段替换 ext-debug.js。

您的 HTML 文件应如下所示：

<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>
于 2011-06-14T13:17:28.073 回答