PDA

View Full Version : Ext.requires not working, long load times



grebe
3 Apr 2012, 1:26 AM
I am evaluating use of Ext JS for an intranet application to run under ultidev Cassini.

Using the 'getting started guide' I put the helloext application at localhost:5078/Helloext

It seems that, if I add the Ext.require('Ext.container.Viewport'); to the example application it does not effect the load times. Looking at the developers tools under chrome, the entire framework still seems to be loading.

I do not see the warning message regarding synchronously loading 'Ext.container.Viewport'.

Is this down to the port number used in the request - the loader would need to use this port for loading?

I think we are tied to using Cassini to make this an installable intranet application.

Appreciate any help with this.

Updated:

This does not seem to be an issue with Cassini.

If I include ext-all.js the page is delivered in about 2.5 seconds.
If I use the start up example and use ext-debug.js and add Ext.require('Ext.container.Viewport');
to the script, the page takes 12+ seconds to load with a lot of separate requests for what appears to be the entire framework.

I'm clearly not understanding something?

mitchellsimoens
3 Apr 2012, 11:28 AM
When you use ext-debug.js and use Ext.requires (or the other ways of file dependancies) Ext.Loader will be loading the files as it is told to by the requires. This will extend load time as it has to download the file and eval it. So when using ext-debug.js versus using ext-all-debug.js yes, ext-debug.js during development will take longer. I say development because in production you should use the SDK Tools to build into a single JS file with only the classes you need.

Ext.require(); will defer the execution of Ext.onReady (or Ext.application#launch) until all the files listed and their dependancies are loaded.

It is normal to see 200/300 files being loaded in a developed application.

grebe
3 Apr 2012, 11:43 PM
Thank you for this.

I confess to not really understanding why so many files are downloaded as the Ext.require only asks for a "Ext.container.Viewport".

At present the best approach seems to be to use
ext-debug-all.js during development, and as you say, build a smaller js for production.

Regards

mitchellsimoens
4 Apr 2012, 4:17 AM
It is recommended during development to use ext-debug.js. If you don't then when you do the build you are not guaranteeing that you will have all your classes included in the build.

Think about it. Ext.container.Viewport requires Ext.container.Container which requires Ext.Component which requires Ext.AbstractComponent. Now you have mixins and a slew of files needed like that.