Come si include una classe UX nel pattern MVC?

Question

Prima che il pattern MVC vorrei includere classi UX semplicemente inserendo questo nella parte superiore della JS, prima di Ext.onReady:

Ext.Loader.setConfig({enabled: true}); 
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); 
Ext.require([ 
    'Ext.ux.grid.FiltersFeature' 
]); 

Ora sto lavorando con il pattern MVC e ho un gridpanel che ha bisogno di utilizzare questo stessa caratteristica. Ho incluso un richiede dichiarazione nella vista in questo modo:

Ext.define('ST.view.StudentLog', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.studentlog', 
    requires: [ 
     'Ext.ux.grid.FiltersFeature' 
    ], 

Ma l'applicazione genera un errore 404 quando comincia prima di caricare con questo.

Qualche idea?

EDIT:

Ho provato a mettere questo stesso blocco di codice nella parte superiore della vista anche inutilmente (riferendosi al blocco Ext.Loader.setConfig/.setPath).

Il caricatore continua a provare a caricare le classi UX da extjs/src/ux/ indipendentemente da come provo a dirlo diversamente. Secondo lo standard this suggestion, ho anche provato a definire una proprietà path nel mio controller dell'app ma sembra che tutto ciò che il rispondente ha visto nell'origine non esiste in 4.1 rc3 perché non riesco a trovarlo e non funziona .

Se aggiungo il file FilterFeature.js come file sorgente importato nel mio codice HTML con i tag <script>, tutte le sue dipendenze ottengono 404 errori all'avvio della mia app.

Ci deve essere un modo semplice per includere le classi UX in un'app direttamente dalla cartella UX in modo che possa collegarsi ad altre dipendenze UX.

Answer 1

Ok l'ho trovato da this post.

solo bisogno di utilizzare Ext.Loader.setPath chiamata nella parte superiore del controller app, ad esempio:

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); 
Ext.application({ 
    name: 'ST', 
    autoCreateViewport: true, 
    ... 

o dove vuoi mettere le classi UX, a fini di condensazione, le classi UX specifiche app dovrebbe essere tirato fuori e bloccato nella tua cartella qualcosa come app/ux come copre il post.

Answer 2

Sembra un problema con il percorso in cui si trova il file Ext.ux.grid.FiltersFeature. È possibile controllare quale URL della richiesta ha generato il 404? Questo dovrebbe darti un indizio su dove posizionare il Ext.ux.grid.FiltersFeature affinché possa essere caricato automaticamente.

Ecco un esempio della struttura di directory che sto usando e dove sono le classi ux.

js 
|---app.js 
| 
|---app 
| |---controller 
| |---model 
| |---store 
| +---view 
| 
+---ux 
    |---form 
    +---layout 

In sostanza, il namespace seguirà la struttura della directory.

Answer 3

È possibile combinare insieme i parametri Loader, semplificando la lettura e la comprensione della struttura dell'app/file. Credo che quello che sta succedendo è che ti manca la definizione di dove sono i file di libreria e i file di app - tutti relativi a app.js. Pertanto, quando si sta caricando, l'app sta tentando di utilizzare i file in base al percorso dello spazio dei nomi primario (extjs/src) anziché alla radice dell'applicazione.

Ext.Loader.setConfig({ 
    enabled : true, 
    paths: { 
     'Ext' : 'extjs/src', // library src folder/files 
     'MyApp' : 'app',  // app namespace folder/files 
     'Ext.ux' : 'ux'   // extension namespace folder/files 
    } 
}); 

Lo stesso processo funziona anche per il touch - basta scambiare "extjs" per "tocco".

Se si utilizza Architect, è necessario selezionare Applicazione, aggiungere un Caricatore (pannello di configurazione). Questo offrirà un caricatore con un oggetto percorso che può essere modificato. L'opzione abilitata è un'opzione di casella di controllo, per impostazione predefinita impostata su true.

MODIFICA: Una cosa che non ho chiarito è che i file di origine e di applicazione della libreria non devono essere definiti nella maggior parte dei casi, specialmente usando il layout predefinito dei file. Questo seguente frammento di codice è spesso ampio:

Ext.Loader.setConfig({ 
    enabled : true, 
    paths: { 
     'Ext.ux' : 'ux' 
    } 
}); 

Answer 4

Nel mio caso (usando ux/DataTip.js), con ext-4.2.1.883 e sencha cmd 4.0.2.67, sono stato in grado di utilizzare Ext.ux classi con la soluzione fornita, utilizzando:

Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); 

Ma la sencha app refresh lamenta, con:

[ERR] C2008: requisito non aveva file corrispondenti (Ext.ux.DataTip)

Coping/linking extjs/examples/ux a extjs/src/ux risolvere il mio problema. L'applicazione funziona e sencha cmd è anche in grado di tenere traccia delle cose. Con questa operazione di copia/collegamento, non è necessario utilizzare Ext.Loader.setPath. Basta usare la classe nella richiede:

Ext.define('Demo.Application', { 
name : 'Demo', 
requires : [ (...), 'Ext.ux.DataTip'], 

Answer 5

ExtJS 6, utilizzando il MVVC ei cmd Sencha. Ho usato l'app sencha per avviare un'app. ho codificato al punto in cui ho voluto usare il ItemSelector, modificato il app.json di richiedere un blocco aggiunto nel ux:

"requires": [ 
    "font-awesome", 
    "ux" 
], 

Nel mio codice di controllo in cui ho voluto creare il widget ItemSelector:

requires: [ 
    'Ext.ux.form.MultiSelect', 
    'Ext.ux.form.ItemSelector' 
], 

e il codice appropriato per creare lo ItemSelector. Un problema che ho avuto è che vuole un vero archivio di dati con un modello e non ho potuto usare dati falsi.

poi ho fatto un'applicazione sencha costruire