Multipage App - EXT JS 6 - Paket (404)

Question

Ich habe eine mehrseitige Anwendung, die ich von EXT JS 6 (Einzelseitenanwendung) in einen Arbeitsbereich (ext JS 6) migriert habe.

Ich habe einige der gemeinsamen Teile, wie meine Anwendungen Header und ein paar benutzerdefinierte Eingabekomponenten aufgeteilt. Diese habe ich in ein Paket gesteckt (da auf sie durch mehrere 'Anwendungen' in meinem Arbeitsbereich zugegriffen wird.

Mein Problem ist, dass ich eine Seite (Workspace App) habe, die gut läuft, finde alle Dateien, die es braucht und trägt auf ganz gut.

die andere Seite (gleiche Arbeitsraum, ein separates App) nicht funktioniert, wird es 404 der Suche nach Dateien bekommen (404-ing, weil es im falschen Verzeichnis)

APP.JSON Ich habe die APP.JSON-Datei durchlaufen und genau angegeben, welche Pakete zu verwenden sind.Es ist in beiden Anwendungen identisch.

Klassenpfad Ich habe den ClassPath für beide Anwendungen nicht berührt. Sie sind also immer noch identisch.

App 1 (Seite1) Sucht nach einer Datei in meinem Paket, indem Sie auf:

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

App 2 (page2) Sucht die gleiche Datei, indem Sie auf:

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

Ich habe Sencha Cmd ausgeführt und hatte keine Fehler

sencha app refresh 
sencha app build 

Alles, was mir dabei einfällt, sollte einen Unterschied machen, wurde überprüft und überprüft;

So Frage Zeit: - Warum/wie Sencha Cmd testen, dass eine Datei an einem bestimmten Ort existiert? - Warum würde es in diesem Fall falsch machen? - Welche Konfigurationsoptionen und Gotchas könnte ich vermissen?

EDIT:

Ich habe gerade gefunden und führen Sie die folgenden Schritte aus:

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 

das wie folgt aussieht es mir zu sagen, App2 hat den richtigen Pfad in der Konfiguration ... (Man fühlt sich wie ich habe einen Fehler gefunden)

Answer 1

Klingt, als ob Sie Probleme mit der Ext.Loader-Konfiguration haben. In den Kommentaren scheint es, dass Sie sowohl im Paket als auch in der Test-App denselben Root-Namespace verwenden. Das Problem besteht darin, dass der Ext.Loader den Namespace dem Dateispeicherort zuordnet. Holen Sie sich das falsche Mapping, und Sie können an der falschen Stelle suchen.

Die einfachste Antwort ist, sicherzustellen, dass das Paket und die App etwas anderes über den Namespace haben. Das kann bedeuten, dass das Präfix geändert wird (z. B. MyPackage vs MyApp) oder einen mehrstufigen Namespace hat (MyStuff.package vs MyStuff.app). Letzteres ist, wie ExtJS selbst organisiert ist.

Ein Ort zum Betrachten ist die generierte classic.json für die App. Diese Datei wird vom Bootstrap-Prozess verwendet. Sie enthält eine Liste aller Klassen, die sie gefunden hat, und gibt an, wo sich diese Klasse im Verhältnis zur Anwendung befindet. (Ich schlage vor, zuerst eine hübsche Druckformatierung vorzunehmen, da es sich um eine einzige Zeile handelt). Überprüfen Sie, ob der Klassenname darin enthalten ist und wie der Pfad lautet.

... 
"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", 
    ... 
}, 
... 

Der Abschnitt paths ist der entscheidende Teil. Siehe oben, wie es einen für den Namensraum (Ext) und einen anderen für die Datei (Ext.Ajax) gibt. Wenn der Anwendungscode einen Verweis auf eine Klasse nicht in dem Abschnitt paths laden möchte, findet es die längste Übereinstimmung für den Klassennamespace und sucht in diesem Verzeichnis.