多页应用程序 - EXT JS 6 - 包 (404)

Question

我有一个多页应用程序，我已经从 EXT JS 6（单页应用程序）迁移到作品space（ext JS 6）。

我已经拆分出了一些常用的部分，例如我的应用程序 header 和一些自定义输入组件。这些我已经放入一个包中（因为它们在我的工作 space.

中被多个 'applications' 访问

我的问题是我有一个页面（工作 space 应用程序）运行没问题，找到它需要的所有文件并继续正常工作。

另一个页面（同样的工作 space，单独的应用程序）不工作，它正在寻找 404 文件（404-ing 因为它在错误的目录中寻找）

APP.JSON 我已经浏览了 app.json 文件并准确地告诉它要使用的包。它在两个应用程序中是相同的。

Class路径 我没有触及任何一个应用程序的 ClassPath。所以他们还是一样的。

应用程序 1（第 1 页）通过以下方式在我的包中查找文件：

http://localhost/packages/local/page/src/store/file.js

App 2 (page2) 通过转到以下位置查找相同的文件：

http://localhost/App2/store/file.js

我已经运行 sencha cmd 并且没有任何错误

sencha app refresh
sencha app build

所有我能想到的应该在这里有所作为的东西都已经检查过并重新检查过；

所以提问时间： - Why/how Sencha Cmd 是否测试文件是否存在于特定位置？ - 为什么在这种情况下会出错？ - 我可能遗漏了哪些配置选项和陷阱？

编辑：

我刚刚找到并运行以下内容：

C:\Development\workspaces\e\e\app1>sencha app explain "testapp.store.Locale"
Sencha Cmd v6.2.0.46
[INF] Loading app json manifest...
[INF] Loading classes...
[INF] Gathering dependencies...
"edited"\sencha-compiler\app\full-page-master-bundle.js
    (@require file.js)
      --> e\app1\app.js
            e\app1\app.js:6 (Ext.require)
              (config)
                --> packages\local\page\src\store\Locale.js





C:\Development\workspaces\e\e\app2>sencha app explain "testapp.store.Locale"
    Sencha Cmd v6.2.0.46
    [INF] Loading app json manifest...
    [INF] Loading classes...
    [INF] Gathering dependencies...
        "edited"\sencha-compiler\app\full-page-master-bundle.js
        (@require file.js)
        --> e\app2\app.js
            e\app2\app.js:6 (Ext.require)
            (config)
            --> packages\local\page\src\store\Locale.js

这似乎告诉我 App2 的配置路径正确...（感觉我发现了一个错误）

Answer 1

听起来您遇到了 Ext.Loader 配置问题。从评论来看，您似乎在包和测试应用程序中使用了相同的根命名空间。问题是 Ext.Loader 会将命名空间映射到文件位置。得到错误的映射，你就会在错误的地方寻找。

最简单的答案是确保包和应用程序的命名空间有所不同。这可能意味着更改前缀（例如 MyPackage 与 MyApp），或具有多级命名空间（MyStuff.package 与 MyStuff.app）。后者是 ExtJS 本身的组织方式。

要查看的一个地方是为应用程序生成的 classic.json。这个文件被 bootstrap 进程使用，它有一个它找到的所有 classes 的列表，以及 class 相对于应用程序的位置。（我建议首先对其进行一些漂亮的打印格式设置，因为它们都是一行）。检查它是否有您要查找的 class 名称，以及路径是什么。

...
"classes": {
    ...
    "Ext.Ajax": {
        "alias": [],
        "alternates": [],
        "idx": 43
    },
    ...
},
...
"loadOrder": {
    ....
    {
        "idx": 43,
        "path": "../ext-6.2.0/packages/core/src/Ajax.js",
        "requires": [
            42
        ],
        "uses": []
    },
    ....
},
...
"paths": {
    "Ext": "../ext-6.2.0/classic/classic/src",
    ....
    "Ext.Ajax": "../ext-6.2.0/packages/core/src/Ajax.js",
    ...
},
...

paths 部分是关键部分。在上面，看看如何有一个用于命名空间 (Ext) 和另一个用于文件 (Ext.Ajax)。如果应用程序代码想要在 paths 部分加载对 class not 的引用，它会在 class 命名空间中找到最长的匹配项，并且在该目录中查找。

多页应用程序 - EXT JS 6 - 包 (404)

Multipage App - EXT JS 6 - Package (404)

javascript

extjs

sencha-cmd

extjs6