extjs 5. ext.applicationは関数ではありません。どうして？

Question

コンソールのエラー：Ext.application is not a function。My index.htmlファイルには、このコードが含まれています。

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

.

app.jsは、このコードだけを持ち、1つのデモから取得されたもの：

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

.

編集

ところで、「公式」/ext-5.0.1/examples/app/simple/simple.htmlを実行しても同じエラーが発生します。なぜそれは？

Answer 1

Ext.applicationブロック内の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'
        }]
      });
    }
  });
})

.

これが必要な理由btwは、ext-all-debug.jsファイルにすべてのextjsが含まれていないことです。ブートストラップコードが含まれています - 他のすべてのものを手に入れる方法を知っているコード。その一部「他のすべて」はアプリケーションコードです。それで、それが実行する機会があるまで、ext.applicationは存在しません。

Portalの例は、sencha app build - microloader.jsの結果を使用するために機能します。これにより、extjsのフルバージョン（または、アプリで使用されている部分）がロードされ、したがってext.applicationはすでに使用される時点ですでに定義されています。（同じことがSencha Fiddleと同じです - あなたはext.onrieadyが必要ではありません）

Answer 2

の代わりにp>

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

.

を使うべきです

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

.

2番目のコンポーネントとクラスはすべて、期待どおりに含まれています。