Class loading explanation / best practices?

[roger.spall]

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..

\myApp\src

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

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


Ext.Loader.setConfig({
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.

[dougbieber]

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.

[mitchellsimoens]

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.

[roger.spall]

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?