Extjs 5. Ext.application is not a function. Why?

Question

I get an error in console: Ext.application is not a function. My index.html file contains this 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>    
...

While app.js has just this code, taken from one 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'
        }]
    });
}
});

EDIT

By the way, even running "official" /ext-5.0.1/examples/app/simple/simple.html I get the same error. Why is that?

your code works fine on my side,try here https://fiddle.sencha.com — sakir, Jul 30 '14 at 14:19
Are you sure that's the only error? This declaration usually exists in a global context - if there is another issue it may be killing the entire page. — Emissary, Jul 30 '14 at 14:19
Well, whatever I do, I still get this error. But when I change to Ext 4.1.1 version, then everything is ok. Can this be some kind of prohibition? I mean, you have to have a commercial license to use such kind of coding. Or not? — Jacobian, Jul 30 '14 at 15:09

score 3 · Answer 1 · answered Jan 16 '15 at 10:27

3

Instead of

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

You should use

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

The second one contains all Components and Classes as expected.

answered Jan 16 '15 at 10:27

Thomas Lauria

858
1
7
15

Robert Watkins · Accepted Answer · 2014-07-31T10:03:06.163

2

Wrap the call to Ext.application inside an 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'
        }]
      });
    }
  });
})

The reason this is necessary, BTW, is that the ext-all-debug.js files doesn't contain all of ExtJS. It contains the bootstrap code - the code that knows how to get everything else. Part of that "everything else" is the application code. So until that's had a chance to run, Ext.application doesn't exist.

The portal example you mention works because it uses the result of a sencha app build - the microloader.js. This loads up a full version of ExtJS (or rather, the parts used in the app), and thus Ext.application is already defined by the time it's used. (The same goes with Sencha Fiddle - you wouldn't need the Ext.onReady there either)

edited Jul 31 '14 at 10:03

answered Jul 30 '14 at 20:37

Robert Watkins

2,196
15
17

Sorry, do you have a commercial version of the product or a public one? – Jacobian Jul 31 '14 at 05:18
2

Well, wrapping inside Ext.onReady has no effect – Jacobian Jul 31 '14 at 05:19
Well, let's try the "stupid question" solution - is it successfully loading the `/ext-5.0.1/ext-all-debug.js` file? The other possibility is that, because you're using the nightly build, you may have a broken version. Try it with the 5.0.0 release. – Robert Watkins Jul 31 '14 at 05:47
Yes, it is successfully loading it, because `Ext.application is not a function` is the only error I see in the console. I will now check 5.0.0 release – Jacobian Jul 31 '14 at 06:11
Well, it is a really strange thing. I've just checked 5.0.0 release and here is what I've got. Examples from examples/app/ folder are not running for the same reason - `Ext.application is not a function`, but an example from portal folder is running ok. – Jacobian Jul 31 '14 at 06:17
Okay - I just tried the simple app demo in the examples, and I got the problem you described. I then updated the app.js file so that the call to Ext.application is done onReady, and it worked. I'm updating my answer with more details. – Robert Watkins Jul 31 '14 at 09:57
Thank you, sir! Although, my own code does not work with this trick, the code in examples/app/ started to run. I will take them as a stepping stone. – Jacobian Jul 31 '14 at 11:12
Someone put you a minus for some reason, but I voted up and checked your answer as a solution. Thanks again! – Jacobian Jul 31 '14 at 11:13

Extjs 5. Ext.application is not a function. Why?

2 Answers2

Linked