Architettura ExtJS per applicazione multi pagina

Question

Possiedo un'applicazione .NET in cui la maggior parte dell'interfaccia utente è personalizzata. In alcune pagine, sto usando componenti ExtJS4, come Grid, per mostrare una tabella di utenti, ad esempio. Ho anche un'altra pagina in cui visualizzo un profilo utente e un'altra pagina in cui visualizzo un modulo di domanda. Ci sono molte altre pagine che non usano ExtJS. Uso saltuariamente dei componenti ExtJS e vorrei avere un codice riutilizzabile per negozi e modelli su tutte le pagine in cui utilizzo ExtJS.

Ho familiarità con l'architettura MVC di ExtJS ma tutta la documentazione e gli esempi dimostrano le migliori pratiche per un'app ExtJS a pagina singola.

Per il mio scenario, cercavo consigli su quale sia il modo migliore per progettare il codice ExtJS.

Devo solo creare negozi e modelli in un file JavaScript comune e includere quel file in ogni pagina? Quindi creare un'istanza di Ext.Application o Ext.onReady per ogni pagina in cui vorrei utilizzare i componenti ExtJS? O dovrei essenzialmente usare un'architettura MVC per ogni pagina in questione solo per pochi componenti?

Voglio solo evitare di copiare/incollare il codice e avere riutilizzabilità. Si prega di raccomandare il percorso migliore da seguire.

Answer 1

Quindi ho trovato una soluzione adatta che credo funzioni bene.

Sul mio modello di pagina che carico Ext JS richiesto file e utilizzare Loader.setConfig per specificare la posizione di ExtJS MVC struttura di cartelle:

<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> 

Poi nella mia cartella app, ho la seguente struttura di cartelle:

app/ 
    Models/ 
     User.js 
     MyOtherModel.js 

Il mio utente.il file js contiene:

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' 
    }); 

Poi, in ogni pagina che sto usando ExtJS, ho appena includo il modello attraverso 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 
    }); 

Con questo metodo, posso scrivere codice riutilizzabile come come modelli e controller e non devono andare MVC completo con una sola vista.

Answer 2

Ho dovuto creare un'applicazione che includesse diverse pagine che non erano componenti ExtJS. Per me era circa 50/50 quindi un po 'più ExtJS del tuo. Più istanze di Ext.Application non erano applicabili quando ho provato a causa del modo in cui il viewport era legato ad esso.

Ho finito per utilizzare una sola Ext.Application con una singola finestra (che è utile per ridimensionare la gestione), ho creato una vista "proxy" Ext.panel.Panel per le altre pagine (non ExtJS) e ho scaricato il contenuto della pagina nella configurazione html di questo pannello quando è stato eseguito il rendering utilizzando un servlet - Non volevo usare gli IFrame ma suppongo che potrebbe essere un'altra opzione.

Questo ha funzionato bene per me e sono stato in grado di sfruttare l'architettura MVC come questo.

Answer 3

L'ultima versione di Sencha Cmd supporta esplicitamente lo sviluppo e l'implementazione di multi-page application. Se le dipendenze sono configurate correttamente, è possibile creare pacchetti di costruzione specifici per pagina per ottimizzare il caricamento e la memorizzazione nella cache per pagina. Anche se da un punto di vista pratico, se la quantità di codice che si sovrappone è abbastanza grande (e/o la quantità totale di codice abbastanza piccola) potrebbe essere meglio per BACIO e includere semplicemente tutte le classi dell'app in un unico file.

Sì, ogni pagina che utilizza Ext in genere deve utilizzare Ext.onReady o Ext.application che include il codice dell'app. Spetta o meno seguire lo schema MVC e deve essere guidato dalle esigenze e dalla complessità della tua app. Per casi semplici spesso non è meritevole, ma per applicazioni complesse o sviluppo di team probabilmente ha senso seguire MVC.