ExtJS Architektur für Multi-Seite Anwendung

Question

Ich habe eine .NET-Anwendung, in der die meisten der Benutzeroberfläche benutzerdefinierte ist. Auf einigen Seiten verwende ich ExtJS4-Komponenten wie Grid, um beispielsweise eine Tabelle mit Benutzern anzuzeigen. Ich habe auch eine andere Seite, auf der ich ein Benutzerprofil anzeige, und eine andere Seite, auf der ich ein Bewerbungsformular zeige. Es gibt viele andere Seiten, die ExtJS nicht verwenden. Ich verwende kaum ExtJS-Komponenten und möchte wiederverwendbaren Code für Stores und Modelle auf allen Seiten verwenden, auf denen ich ExtJS verwende.

Ich bin vertraut mit ExtJS MVC-Architektur, aber die gesamte Dokumentation und Beispiele demonstrieren Best Practices für eine einzelne Seite ExtJS App.

Für mein Szenario war ich auf der Suche nach Ratschlägen, wie der ExtJS-Code am besten zu gestalten ist.

Sollte ich nur die Stores und Modelle in einer gemeinsamen JavaScript-Datei erstellen und diese Datei auf jeder Seite enthalten? Erstellen Sie dann eine Instanz der Ext.Application oder Ext.onReady für jede Seite, die ich ExtJS-Komponenten verwenden möchte? Oder sollte ich eine MVC-Architektur für jede einzelne Seite nur für einige wenige Komponenten verwenden?

Ich möchte nur kopieren/einfügen Code und haben die Wiederverwendbarkeit. Bitte empfehlen Sie den besten Weg zu nehmen.

Answer 1

So fand ich eine geeignete Lösung, die meiner Meinung nach gut funktioniert.

Auf meiner Seite Vorlage laden I Ext JS-Dateien erforderlich und Loader.setConfig verwenden Lage von ExtJS MVC Ordnerstruktur angeben:

<link href="<path>/ext-all.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="<path>/bootstrap.js" charset="utf-8"></script> 
<script type="text/javascript"> 
    Ext.Loader.setConfig({ 
     enabled: true, 
     paths: { 
      'GS': '<path>/extjs/app") %>' 
     } 
    }); 
</script> 

dann in meiner app Ordner, ich habe die folgende Ordnerstruktur:

app/ 
    Models/ 
     User.js 
     MyOtherModel.js 

Mein Benutzer.js-Datei enthält:

Ext.define('GS.Model.SimpleUser', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'UserID', type: 'int' }, 
      { name: 'Username', type: 'string' }, 
      { name: 'Firstname', type: 'string' }, 
      { name: 'Lastname', type: 'string' }, 
      { name: 'Email', type: 'string' } 
     ], 
     idProperty: 'UserID' 
    }); 

Dann auf jeder Seite, die ich verwende ExtJS, ich schließe nur das Modell durch Ext.requires:

Ext.require([ 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.util.*', 
     'Ext.state.*', 
     'Ext.toolbar.Paging', 
     'Ext.tip.QuickTipManager', 
     'GS.Model.SimpleUser' 
    ]); 

    Ext.onReady(function() { 
     //app code here 
    }); 

Mit dieser Methode kann ich schreiben wiederverwendbaren Code, wie als Modelle und Controller und müssen nicht voll MVC mit einem einzigen Viewport gehen.

Answer 2

Ich musste eine Anwendung erstellen, die mehrere Seiten enthielt, die keine ExtJS-Komponenten waren. Für mich war es ungefähr 50/50, also etwas mehr ExtJS als deine. Mehrere Instanzen von Ext.Application konnten nicht ausgeführt werden, als ich versuchte, weil das Ansichtsfenster an sie gebunden war.

Ich endete mit einer Ext.Application mit einem einzigen Ansichtsfenster (das ist schön für die Größenanpassung), ich erstellte eine "Proxy" Ext.panel.Panel Ansicht für die anderen (nicht ExtJS) Seiten und ich entleerte den Inhalt der Seite in diesem Panel html Config, wenn es mit einem Servlet gerendert wurde - ich wollte nicht IFrames verwenden, aber ich nehme an, dass könnte eine andere Option sein.

Das funktionierte gut für mich und ich konnte die MVC-Architektur so nutzen.

Answer 3

Die neueste Version von Sencha Cmd unterstützt explizit multi-page application Entwicklung und Bereitstellung. Wenn Ihre Abhängigkeiten ordnungsgemäß eingerichtet sind, können Sie seitenspezifische Build-Pakete erstellen, um das Laden und Zwischenspeichern pro Seite zu optimieren. Obwohl aus praktischen Gründen die Menge an überlappendem Code groß genug ist (und/oder die Gesamtmenge an Code klein genug ist), ist es möglicherweise besser, KISS zu verwenden und alle Ihre App-Klassen in eine Datei aufzunehmen.

Ja, jede Seite, die Ext verwendet, sollte normalerweise Ext.onReady oder Ext.application verwenden, die den App-Code umschließt. Ob Sie dem MVC-Muster folgen oder nicht, hängt von Ihnen ab und sollte von den Anforderungen und der Komplexität Ihrer App abhängen. Für einfache Fälle ist es oft nicht verdientermaßen, aber für komplexe Apps oder Teamentwicklung ist es wahrscheinlich sinnvoll, MVC zu folgen.