Extjs 5 class 午餐应用程序未找到

Question

我正在使用 Extjs 5.0.1，尝试实现基本应用程序。这是我的文件夹结构：

Project
  app
    controller
    model
    store 
    view
      MainView.js
  app.js

OtherFolder
  index.html

注意：index.html 文件位于 app.js

之外的其他位置

这是我的 index.html 文件

index.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
    <script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
    <script type="text/javascript" src="../Project/app.js"></script>
</head>
<body>
  <div id="tables"></div>
</body>
</html>

这是我的 app.js 文件：

//app.js
Ext.define('GestioneTit.app.Application',
{
        extend: 'Ext.app.Application',

        name: 'GestioneTit',

        launch: function(){

            Ext.create('GestioneTit.view.MainView');

        }
});

Ext.application('GestioneTit.app.Application');

这是我的 MainView.js 文件：

//MainView.js
Ext.define('GestioneTit.view.MainView',
{
        extend: 'Ext.tab.Panel',

        tabPosition: "left",
        tabRotation: 0,
        width: 900,
        height: 1000,
        activeTab: 0,
        items: [
        {
                title: 'Tab 111111111111111111111111111111 22111221',
                html: 'A simple tab'
        }],
        renderTo: "tables"
});

问题是当我午餐我的应用程序时，我在控制台中看到这个错误：

[W] [Ext.Loader] Synchronously loading 'GestioneTit.view.MainView'; consider adding Ext.require('GestioneTit.view.MainView') above Ext.onReady

SCRIPT5022: [Ext.create] Unrecognized class name / alias: GestioneTit.view.MainView

我已经按照官方 Sencha 网站上的指南进行操作，但似乎不起作用。

我分析了 http 请求，当加载程序尝试加载 MainView.js 文件时，我注意到了 404。它产生一个错误的url。

Answer 1

尝试将视图添加到 Application.js 中的视图配置：

Ext.define('GestioneTit.app.Application',
{
        extend: 'Ext.app.Application',

        name: 'GestioneTit',
        views: [
            'GestioneTit.view.MainView'
        ],
        launch: function(){

            Ext.create('GestioneTit.view.MainView');

        }
});

Ext.application('GestioneTit.app.Application');

Answer 2

在一个典型的 ExtJS 应用程序中，您将源代码放在一个名为 app 的文件夹中，就在您放置 index.html 文件的文件夹下。您没有这样做 – 结果，加载视图 class 的 Ajax 请求去了错误的地方（如您所见）。

您需要做的是告诉 ExtJS 您的代码位于何处。为此，Ext.Loader.setPath 是你的朋友。

例如：Ext.Loader.setPath('GestioneTit', '../Project/app')

http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.Loader-method-setPath

Extjs 5 class 午餐应用程序未找到

Extjs 5 class not found when lunch application

javascript

extjs

extjs5