PDA

View Full Version : Define class in any order



Sylvain Filteau
16 Aug 2012, 6:39 AM
I want to join all my classes with a "find | cat" in a file "all-classes.js".

The question is : using Ext.define, is it possible to define class in any order in one file and it would still works ?

Thanks !

SebTardif
16 Aug 2012, 6:50 AM
The order is important. When the Sencha SDK works, very fragile, it will concatenate in the right order. Ext JS could be more cleaver and postpone dependents while things are still loading.

friend
16 Aug 2012, 6:52 AM
It's been my experience that I had to combine/minify my classes in the following order:


Models
Stores
Any custom widgets/non-standard packages.
Views
Controllers
app.js

Of course, if you use the Sencha SDK Tools (http://www.sencha.com/products/sdk-tools/), this is all handled for you...

Sylvain Filteau
17 Aug 2012, 6:57 AM
I'm thinking doing a script that generates a list of Ext.require([]); in a javascript file then adding it to a html file that the sencha sdk could read to create the jsb3 file.

Do you think that should solve the problem of dependency itself ?

SebTardif
18 Aug 2012, 4:36 AM
The SDK is loading the application, then extract the right order. So your idea will not work.

What you can do is to load your application yourself, trigger all code, then get the array of js file that is in memory, probably inside Ext.Loader. The list of js file in the array will be in the right order.

The SDK and suggestion above assume that your classes declares what it "requires" and "uses".

Sylvain Filteau
18 Aug 2012, 5:56 AM
As I check in the SDK code, it looks like it executes the code from my page with phantom and dumps the content of the Ext.Loader.history in the jsb3 file.

So if my classes declares all the right "requires" and everything, it should work, no ?

Sylvain Filteau
20 Aug 2012, 11:17 AM
So as far as I'm concerned, creating a specially crafted app.js with a "Ext.require" statement for all of my classes allows Sencha SDK to create the all-classes.js file that I want.

Here is the template I used to generate my app.js :



Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});


Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');
Ext.Loader.setPath('BaseNs', 'app');


classes = [];
classes = classes.concat([/*###MODELS###*/]);
classes = classes.concat([/*###STORES###*/]);
classes = classes.concat([/*###OTHERS###*/]);
classes = classes.concat([/*###VIEWS###*/]);
classes = classes.concat([/*###CONTROLLERS###*/]);


for (var i = 0; i < classes.length; i++) {
console.log('>>> Beginning inclusion of ' + classes[i]);
Ext.require([classes[i]]);
console.log('>>> Ending inclusion of ' + classes[i]);
}


I created a PHP script that scans my app directory and generates the name of the class. Then the script replaces the propper /*### ###*/ tags.