2011-05-06 81 views
0

我试图学习ExtJS 4正在使用的新MVC体系结构,并遇到一些严重问题。下面是我得到的,当我加载页面(浏览器JS控制台):Ext.Load无法找到所需的文件

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应该负责为我加载所需的文件。

users控制器

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

附注:我已经尝试解决发现here无济于事,我已经试过appFolder属性设置我的应用程序既../app,只是app

感谢您的帮助。

回答

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>