Wie man ein Sencha ExtJS Projekt einrichtet, das zZ für den Desktop gebaut wird, funktioniert auch für Mobile?

Question

Wir haben bisher mit dem Build-Deskriptor classic entwickelt, um dynamische Webseiten für den Desktop zu erstellen.

Jetzt brauchen wir auf der gleichen Anwendung mit dem mobilen arbeiten, aber nicht unbedingt die gleiche Homepage auf dem Desktop oder mobile laden.

Der Benutzer besucht die Seite http://example.com mit einem Desktop-Browser. Dann sieht er das Ansichtslayout für den Desktop
Der Benutzer besucht die Seite http://example.com mit einem mobilen Browser. Dann sieht er die Ansicht Layout für das mobile (insgesamt verschiedenen View-Datei sein könnte)

Wir fanden diese Seite innerhalb Dokumentation ohne viel Hilfe: https://docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html

Eigentlich eine Seite, die gerade arbeitet völlig in Ordnung auf dem Desktop beim Einschalten auf den Chrome-Simulator (zum Beispiel das Apple iPad Simulator Einstellung) wir die folgenden Fehler in der Konsole:

wir die wenigen Schritte benötigen, die es richtig Setup erforderlich sind.

Answer 1

Wenn Sie eine brandneue Anwendung in ExtJS 6 erstellen, geben Sie cmd sencha Acess und rufen: "Sencha erzeugen App NameApp ../folderApp"

Dann wird die folgende Struktur erstellt: Click here to see the structure

I Ich weiß nicht, über welche Struktur Ihr Code erstellt wurde, aber um auf Desktop- und mobilen Geräten zu arbeiten, muss er in dieser Struktur von sencha cmd generiert werden.

Nach dieser Struktur (generieren Sie eine neue Anwendung ist eine bessere Praxis dafür) müssen Sie das "rigth Modell von extjjs 6.0" in Erinnerung bringen. ExtJS erlauben MVC- oder MVVM-Architekturen. MVC Architektur wird im Wesentlichen von einem großen Controller gesteuert, der alle Komponenten Ihrer Anwendung steuern kann. Auf der anderen Seite hat MVVM architecture einen Controller für jede Ansicht - er wird instanziiert, wenn die Ansicht instanziiert ist, und zerstört, wenn die Ansicht zerstört wird. Diese Architektur wird in ExtJS empfohlen, besonders in den Leistenversionen.

Sie müssen jetzt den Code, der in Ihrer tatsächlichen Anwendung gemacht wurde, auf die neue Anwendung und Architektur übertragen. Fügen Sie Ihre gesamte Ansichtsstruktur in NameApp> classic> src> view ein. Öffnen Sie einen neuen Ordner für jede Ansicht. Dieser Ordner sollte die Ansicht und den Controller für diese Ansicht enthalten. Zum Beispiel, lassen Sie uns eine Listenansicht erstellen:

NameApp> classic> src> Ansicht> Liste> List.js

NameApp> classic> src> Ansicht> Liste> ListController.js

Und so weiter ...

Jetzt können Sie mobile Ansichten und Controller getrennt erstellen, auf mobile> src> Ordner anzeigen, folgen Sie dem gleichen Modell in Classic, aber Sie müssen natürlich Komponenten von Mobile Toolkit verwenden.

Bis hier haben Sie eine separate mobile und klassische App im selben Code. Aber Sie können die Leistungsfähigkeit von ExtJS 6 nutzen, indem Sie generische Klassen aus dem App-Ordner erweitern, um Ihren Code zu optimieren. Zum Beispiel können Sie einen allgemeinen Controller für eine bestimmte Ansicht erstellen, die in klassischen und modernen Ordner erweitert werden:

NameApp> app> Ansicht> Liste> ListControllerGeneric.js

Ext.define('NameApp.app.view.list.ListControllerGeneric', { 
    extend: 'Ext.app.ViewController', 
    //here you put code using in modern and classic both 
}); 

NameApp> klassisch> src> Ansicht> Liste> ListController.js

Ext.define('NameApp.app.view.list.ListController', { 
    extend: 'NameApp.app.view.list.ListControllerGeneric', 
    //here you put code using in classic only 
}); 

NameApp> moderne> src> Ansicht> Liste> ListController.js

Ext.define('NameApp.app.view.list.ListController', { 
    extend: 'NameApp.app.view.list.ListControllerGeneric', 
    //here you put code using in modern only 
}); 

Eine wichtige Sache, um Abstürze zu vermeiden, besteht darin, alle Ansichten aus dem klassischen Ordner in den modernen Ordner zu erstellen, auch wenn Sie sie nicht wirklich auf mobilen Geräten verwenden. Darüber hinaus benötigen Sie Sencha App Watch sowohl modern als auch modern, aber Sie müssen Sencha App bauen, um beide zu bauen (oder Sencha App Build spezifisch zu bauen).

Ich hoffe, dass diese Erklärung für Sie nützlich sein kann. Dank

Answer 2

Die Frage ist sehr breit, und ich kann nicht sehen, was Sie getan haben und warum es fehlschlägt. Die Touch-Unterstützung, die hinter Ihrem Link steht, ist für das klassische Toolkit, nicht für das moderne Tool. Wenn Sie also ein modernes Toolkit verwenden möchten, vergessen Sie diesen Link.

Wie bei den meisten dieser Framework-Änderungen erstellen Sie am besten eine neue Anwendungsumgebung (sencha generate app) und portieren (kopieren) dann Ihren Quellcode. Stellen Sie beim Generieren einer neuen Anwendungsumgebung keine Toolkit-Konfiguration bereit, sodass eine universelle App erstellt wird.

Dann nicht nur den gesamten Code in einem einzigen Verzeichnis. Sie müssen Ihre vorhandenen Code-Dateien in zwei Teile zerlegen: "Verwendet für beide Toolkits" und "Verwendet nur für klassische". Ansichten sind normalerweise nur klassisch, während einige der Modelle und Speicher universell sein können. Die zwei Teile gehen in zwei verschiedene Verzeichnisse: src für den Universalteil und classic/src für den klassischen Teil.

Nur dann schreiben Sie die Ansichten für moderne Toolkit (setzen Sie sie in modern/src), und alles sollte gut kompilieren.

Answer 3

Im sehr neu Sencha, aber ich möchte darauf hinweisen, dass die Verwendung von:

sencha app watch 

tryied alle meine Dateien auf dem App-Ordner zu finden, auch wenn ich verwenden oder verwenden „modern?“ chrome devs als mobiler User-Agent.

Verwendung:

sencha app watch modern 

das Problem gelöst. Dieser Befehl sucht nach dem Benutzeragenten oder dem "? Modern" - und "? Classic" -Tag und fordert die korrekten Dateien an.

Diese Antwort war ursprünglich @ Albanir Neves Antwort, ich habe es hier nur deutlicher gemacht.