Extjs 5. ext.application non è una funzione.Perché?

Question

ottengo un errore in console: Ext.application is not a function.Il mio file index.html contiene questo codice:

...
<link rel="stylesheet" type="text/css" href="/ext-5.0.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" />
<script src="/ext-5.0.1/ext-all-debug.js"></script>    
<script type="text/javascript" src="app.js"></script>    
...

.

Mentre app.js ha solo questo codice, prelevato da una demo:

Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                xtype: 'panel',
                title: 'Users',
                html : 'List of users will go here'
        }]
    });
}
});

.

Modifica

A proposito, anche in esecuzione "ufficiale" /ext-5.0.1/examples/app/simple/simple.html ottengo lo stesso errore.Perché è così?

Answer 1

Avvolgere la chiamata a Ext.application all'interno di un blocco Ext.onReady.

// app.js
Ext.onReady(function() {
  Ext.application({
    name: 'AM',
    appFolder: 'app',
    launch: function() {
      Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
          xtype: 'panel',
          title: 'Users',
          html : 'List of users will go here'
        }]
      });
    }
  });
})

.

Il motivo è necessario, BTW, è che i file ext-all-debug.js non contengono tutto di Extjs.Contiene il codice bootstrap - il codice che sa come ottenere tutto il resto.Parte di quel "tutto il resto" è il codice dell'applicazione.Quindi fino a quando non ha avuto la possibilità di eseguire, ext.application non esiste.

L'esempio del portale che menzioni funziona perché utilizza il risultato di un sencha app build - il microloader.js.Questo carica una versione completa di Extjs (o meglio, le parti utilizzate nell'app), e quindi ext.application è già definita dal momento in cui è utilizzato.(Lo stesso vale con Sencha Fiddle - non avresti bisogno di ext.onready neanche lì)

Answer 2

invece di

<script src="/ext-5.0.1/ext-all-debug.js"></script>

.

Dovresti usare

<script src="/ext-5.0.1/build/ext-all-debug.js"></script>

.

Il secondo contiene tutti i componenti e le classi come previsto.