View Full Version : Class loading explanation / best practices?

6 Jan 2012, 10:39 AM
I am really trying to get a grip with best practices for managing my application classes and need some help, pointers, references, etc.

Right now, I have all of my classes in a single root directory, namely..


Meanwhile, all my classes start with my package name, e.g. 'mypackage.ClassName'

In my main js file I then configure the classloader...

enabled: true

Ext.Loader.setPath("mypackage", "src");

And everything works just fine in my development environment - using what I believe to be called 'dynamic class loading'.

Now I want to deploy to production, and have been reading that you shouldn't use 'dynamic class loading' for production and should instead create a single 'myClasses-all.js' file which contains all the classes and is then included in the 'top html' file. Lets ignore minifying js for now.

So, I concatenated all of my js files into a single myClasses-all.js file and include the file at the top level.

Now the fun starts!

If I turn off the dynamic class loading (Ext.Loader.setConfig({enabled: false});) my code stops working and complains about missing classes! Two issues seem to raise their ugly head:

1) Inheritance
Obviously some of my classes extend others, but they are not concatenated into the 'all file' in the order of inheritance (namely root class first, followed by sub classes). So ExtJs finds my ClassB which extends ClassA BEFORE it has found ClassA in my 'all file'
** How do I build my 'all file' with the classes in inheritance order?

2) Requires
Some of my classes use the 'requires: ['class','class'] syntax to specify dependencies. Again, if a class specifies a 'requires' for a class which appears below it in the 'all file' then it cannot find it!
** With the possibility of circular dependencies, I don't see how you can ever 'automatically' order the classes in the 'all file' to account for requires?
** What is the best practice for defining 'requires' in class definitions?

If I turn dynamic class loading on and still keep the 'all file' then my code works, but I see a lot of network traffic requesting the individual classes as the 'all file' is loaded. I am assuming this is because the 'all file' cannot resolve certain classes because of the above problems, and therefore the loader goes out and dynamically loads the classes?

What are the best practices for class loading, building 'all files' and using requires in class definitions?

Thanks in Advance.

6 Jan 2012, 1:14 PM
I'm also having the same challenge, although I'm sure my issue is much more complicated than the original "post". I too need to make an "all.js", if not multiple "all.js" files. A simple example would be very helpful. I basically need the equivalent of an ext-all.js file but for my code.

In addition, I wonder if any solution provided by Sencha would also address circular dependencies. For world-class RIA applications I can't imagine not having a blueprint to achieve this goal.

6 Jan 2012, 1:18 PM
If a class requires another class that is not in ext.js then you should put it in the requires config array. When you are ready to deploy, you can use the SDK Tools to do a build which will figure out the order and build the file in that order.

8 Jan 2012, 11:25 AM
I guess I need to spend more time with the SDK tools... any good documentation?

BTW: How can the tool resolve circular references or conflicts between inheritance hierarchy and requires? For example Class A requires B and Class B requires A, and they cant both come first?

Won't the ExtJS class loader model always suffer from unresolvable dependencies, i.e. there is always the potential for a class that comes first to require a class which comes later, and therefore need dynamic class loading to load individual classes on the fly?

20 Aug 2013, 10:11 AM
Why dynamic class loading isn't advised to be used in a production environment ?

Just because it will do requests over network for each of the needed file ?
What if the production environment it's a LAN intranet app where this shouldn't be a performance issue (I guess).

I'm trying to figure out how to build a complex application (maybe using MVC architecture) but for multiple user groups / roles.

This is something which bothers me and couldn't find a clean example on how should I make it.

I was thinking to take advantage of this dynamic class loading + class extensions from simplest to the more complex (for each role were differs) or something, but not very sure if this is the way or if working.

20 Aug 2013, 11:10 AM
Even if the app is loaded on the local computer, it will still startup slow. If you load 200 files the browser won't download all 200 at once. The browser has like 4 sockets to use and so it will load 4, when 1 finishes it will start to download another and so on so it takes a little bit for the browser to download all 200 files regardless of what network you are on.