Extjs 5.Ext.application ist keine Funktion.Warum?

Question

Ich erhalte eine Fehlermeldung in der Konsole: Ext.application is not a function.Mein index.html Die Datei enthält diesen 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>    
...

Während app.js hat nur diesen Code, entnommen aus einer 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'
        }]
    });
}
});

BEARBEITEN

Übrigens, auch das Laufen „offiziell“ /ext-5.0.1/examples/app/simple/simple.html Ich erhalte den gleichen Fehler.Warum das?

Answer 1

Wickeln Sie den Anruf um Ext.application innerhalb einer Ext.onReady Block.

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

Der Grund dafür ist übrigens, dass die ext-all-debug.js-Dateien nicht das gesamte ExtJS enthalten.Es enthält den Bootstrap-Code – den Code, der weiß, wie er alles andere bekommt.Ein Teil von „allem anderen“ ist der Anwendungscode.Solange dies nicht ausgeführt werden kann, existiert Ext.application nicht.

Das von Ihnen erwähnte Portalbeispiel funktioniert, weil es das Ergebnis von a verwendet sencha app build - Die microloader.js.Dadurch wird eine Vollversion von ExtJS (bzw. die in der App verwendeten Teile) geladen, sodass Ext.application zum Zeitpunkt der Verwendung bereits definiert ist.(Das Gleiche gilt für Sencha Fiddle – dort bräuchte man Ext.onReady auch nicht)

Answer 2

Anstatt

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

Du solltest benutzen

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

Die zweite enthält wie erwartet alle Komponenten und Klassen.