Extjs 5.Ext.application n’est pas une fonction.Pourquoi?

Question

J'obtiens une erreur dans la console : Ext.application is not a function.Mon index.html le fichier contient ce code :

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

Alors que app.js a juste ce code, tiré d'une démo :

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

MODIFIER

Au fait, même en courant "officiel" /ext-5.0.1/examples/app/simple/simple.html J'ai la même erreur.Pourquoi donc?

Answer 1

Enveloppez l'appel à Ext.application à l'intérieur d'un Ext.onReady bloc.

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

La raison pour laquelle cela est nécessaire, BTW, est que les fichiers ext-all-debug.js ne contiennent pas tout ExtJS.Il contient le code d'amorçage - le code qui sait comment obtenir tout le reste.Une partie de ce « tout le reste » est le code de l’application.Donc, jusqu'à ce que cela ait eu la chance de s'exécuter, Ext.application n'existe pas.

L'exemple de portail que vous mentionnez fonctionne car il utilise le résultat d'un sencha app build - le microloader.js.Cela charge une version complète d'ExtJS (ou plutôt les parties utilisées dans l'application), et donc Ext.application est déjà défini au moment de son utilisation.(Il en va de même avec Sencha Fiddle - vous n'auriez pas non plus besoin d'Ext.onReady)

Answer 2

Au lieu de

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

Tu devrais utiliser

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

Le second contient tous les composants et classes comme prévu.