Extjs 5.Ext.aplicação não é uma função.Por quê?
Pergunta
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?
Solução
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á)
Outras dicas
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.