PDA

View Full Version : Minor problem with 'getting started' & dynamic loading



gregw
30 Dec 2011, 9:28 AM
Hi guys,

I'm having a minor problem with dynamic loading in the getting started tutorial. I'm using 4.0.7 and the latest chrome as recommended. The tutorial states that I should see a warning in the console about synchronously loading Ext.container.Viewport but I don't see that.

The tutorial also talks about how only used classes are loaded dynamically. But then, why do I see in my chrome network tab that dozens of JS files are being loaded? Here's the tutorial code for reference:

INDEX.HTML

<html>
<head>
<title>Hello Ext</title>


<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

APP.JS:

Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});



Thanks,

Greg.

mitchellsimoens
30 Dec 2011, 9:32 AM
ext.js, ext-dev.js and ext-debug.js only have the core of the framework. All of the widgets are not part of that so when you use Ext.create or one of the various ways to load a class, you will see requests in your Network tab start flying to load those classes.

gregw
5 Jan 2012, 8:07 AM
Hi,

Thanks for the response. I did understand it would dynamically load, however section 2.2 of the ExtJS 4.0 'Getting Started' speaks of a console warning that does not appear (at least for me) using Chrome.

http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

(http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started)I'm also not understanding the purpose of "Ext.require (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-require)('Ext.container.Viewport (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Viewport)');" if dozens of classes are loaded dynamically anyhow. I didn't see that adding this code reduced the number of dynamically loaded classes.

Alternatively I could use the giant bundled extJS file, and this would be moot, right?

Thanks,

Greg.

mitchellsimoens
5 Jan 2012, 8:13 AM
Ext.require won't decrease the number of dynamically loaded classes. It will just load them upfront. If you use Ext.create and that class isn't loaded it will be loaded and you will see a console warning suggesting that you add it to Ext.require. You don't have to use Ext.require, if you are using Ext.define to create a class definition then I would suggest putting it in the requires array config.

gregw
5 Jan 2012, 8:22 AM
... but that's the thing, I didn't see a console warning either way. Any idea why that might be?

mitchellsimoens
5 Jan 2012, 8:26 AM
If you are using ext-debug.js you will see it if the class is not already loaded when the Ext.create happens.

Zyrix
6 Jan 2012, 4:46 AM
Since 4.0.2 it seems that you don't see any more console warnings if you use ext-debug.js. Try using the newly introduced ext-dev.js instead and you should see the message about synchronous loading when loading the "getting started" tutorial.

Ext will still need to load all the files as they are needed but they are loaded upfront and you get a better debugging experience as you can see the file names and line numbers when debugging.

If you want to speed up the loading progress for quick debugging sessions you might want to use ext-all-dev.js as it loads the Ext files in a single request. Your class files will still be loaded asynchronously unless specified in Ext.require. This is called hybrid loading.

You might want to check this good post here: http://www.sencha.com/blog/using-ext-loader-for-your-application
The Ext.Loader class documentation also explains the different loading approaches: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Loader

RoyW
6 Jan 2012, 8:02 AM
I was re-reading the Getting Started guide this morning and noticed that it didn't mention ext-dev.js or ext-all-dev.js at all. The guide should be updated to mention this or you are going to confuse a lot of new users. I tried to add a comment to the guide but I get internal server error.

mitchellsimoens
6 Jan 2012, 8:06 AM
I use debug versions mostly and I see the warnings when a class is dynamically loaded.

gregw
6 Jan 2012, 9:06 AM
Since 4.0.2 it seems that you don't see any more console warnings if you use ext-debug.js. Try using the newly introduced ext-dev.js instead and you should see the message about synchronous loading when loading the "getting started" tutorial.

Ext will still need to load all the files as they are needed but they are loaded upfront and you get a better debugging experience as you can see the file names and line numbers when debugging.

If you want to speed up the loading progress for quick debugging sessions you might want to use ext-all-dev.js as it loads the Ext files in a single request. Your class files will still be loaded asynchronously unless specified in Ext.require. This is called hybrid loading.

You might want to check this good post here: http://www.sencha.com/blog/using-ext-loader-for-your-application
The Ext.Loader class documentation also explains the different loading approaches: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Loader

That answers it! Thanks!