Extjs 5.Ext.aplicação não é uma função.Por quê?

Question

Eu recebo um erro no console: Ext.application is not a function.Meu index.html ficheiro contém este código:

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

Enquanto app.js tem apenas este código, tomado a partir de uma demonstração:

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

EDITAR

Pelo jeito, mesmo correndo "oficial" /ext-5.0.1/examples/app/simple/simple.html Eu recebo o mesmo erro.Por que isso?

Answer 1

Encapsular a chamada para o Ext.application dentro de um Ext.onReady bloco.

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

O motivo é necessário, BTW, é que o ext-all-debug.js arquivos não conter todos ExtJS.Ele contém o código de inicialização - o código que sabe como conseguir tudo o resto.Parte de que "tudo o mais" é o código da aplicação.Portanto, até que teve a oportunidade de executar, Ext.aplicação não existe.

O portal de exemplo que você mencionou funciona porque ele usa o resultado de um sencha app build - o microloader.js.Este carrega uma versão completa do ExtJS (ou melhor, as peças usadas no aplicativo), e, assim, Ext.aplicativo já está definido pelo momento em que é usado.(O mesmo se passa com o Sencha Mexer - você não precisa Ext.onReady lá)

Answer 2

Em vez de

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

Você deve usar

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

A segunda contém todos os Componentes e Classes conforme o esperado.