View Full Version : How to use this SDK

22 Jun 2011, 12:30 AM
Hi guys,

is there a working tutorial about the SDK?? All I can find is the README-File, the File explaining shortly the JSON-Config format and an outdated tutorial.

* http://www.extjsframework.com/mvc/deploy-mvc-app-with-senchasdktools

Please send me a link ;-)))


24 Jun 2011, 7:01 AM
I have the same question and looking for the tutorial too. :)

26 Jun 2011, 1:30 PM
At the moment, it doesn't appear that there is a self-contained document for the SDK tools.

However, there is information on how to use them for the tools' primary purposes:

1) Build/Package - http://docs.sencha.com/ext-js/4-0/#/guide/getting_started (see Heading #3. Deployment)
2) Theme slicing - http://docs.sencha.com/ext-js/4-0/#/guide/theming (see Supporting Legacy Browsers)

I know it's not anything like a complete reference, but perhaps it will help to move things along?


28 Jun 2011, 12:28 PM
Hi guys,

thankx a lot! thats what i needed. But when i include the ext.js and app-all.js some other classes (around 20) are beeing loaded.

Does sb. know why?


28 Jun 2011, 1:09 PM
Ok, sorry I found it by myself:

I didn't use always: uses and requires

Thankx anyway for the support!


29 Jul 2011, 11:10 AM
Hey Lukas,

Can you please tell us how did you use it?
I'm trying here but I don't have a clue how to do it.


29 Jul 2011, 11:12 AM
I'm on windows. I installed the package and followed exactly the rules stated in the 2 links above ...

If you know the commands, nothing special ;-))

30 Jul 2011, 5:12 AM
ext.js is a thin version of the framework, which autoloads components and classes as it sees fit.

ext-all.js loads the whole framework - however, classes you write which depend on other classes you write (stores depending on models, etc.) will autoload those classes in any event, unless you create a build package for it.

If you're extending a class, you'll find that there's a subtle difference between "uses" and "requires".

"Uses" tells the class manager that some code inside the defined class will reference the "used" class - it's a "hint" to the class loader, but it does not guarantee that the class will be loaded before the class you're defining is instantiated.

"Requires" tells the class manager that the class HAS to be loaded before this class can be instantiated.

Outside class definition, Ext.require and Ext syncRequire take care of getting classes loaded for you.


2 Aug 2011, 7:19 AM
I really wish there was a clear tutorial on how to effectively use the SDK, when to use "uses" and "requires", the subtleties of the loader, etc. I'm having difficulty getting my minified app to run, and I don't well enough understand the way in which classes are loaded in order to debug where things are going wrong.

My app is pure MVC with the recommended architecture outlined here (http://docs.sencha.com/ext-js/4-0/#/guide/getting_started) and here (http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture). I subclass Ext classes and my own classes routinely in my app. I actually consider myself fairly proficient in this architecture, so safe to say, there's nothing particularly wonky with my application layout.

In the app's entry file, I use the loader so:

// Set up loader
Ext.Loader.setConfig({ enabled: true });

// Load application files
Ext.Loader.setPath('MyApp', 'app');
I don't use "uses" and "requires" anywhere else. In an included js app file, I load the application.

Ext.onReady(function() { Ext.create('MyApp.Application'); });When I build my app with the SDK, the minfied file containing my app only has the onReady function after all my class definitions, as the loader functions are in the entry point index file and are not included in the build. I did this because of this advice from the docs here (http://docs.sencha.com/ext-js/4-0/#/api/Ext.Loader):

It's important to note that dynamic loading should only be used during development on your local machines. During production, all dependencies should be combined into one single JavaScript file.Thought I'd done that. After including ext.js and my minified app file app-all.js, the console indicates that the framework is still attempting to load my class files from the MVC directories (app/view, app/controller, etc.). In the production environment, this of course breaks.

The usage docs are fairly lean, and I haven't been able to fight my way around this fairly simple problem for a few days now. If anyone has advice, or can point out what I'm so clearly doing wrong, I'd really appreciate it.

Thanks so much.

4 Aug 2011, 10:09 AM
I have the same problem as korax. Although a slight different structure.
In my entry file I have the ext files (css and js) and my app.js file.

In my app.js I have:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyApp', '/app');

autoCreateViewport: true,
controllers: [my controllers]
stores: [mystores]

The jsb3 generated is:

"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
"files": []
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
"path": "",
"name": "all-classes.js"
"path": "",
"name": "app.js"
"resources": []

I guess that in the files array there should be the files my app uses... I run the build command and my app-all.js just has the contents of the app.js
Any help??

Oh, and if someone can shed some light on the differences of uses and require it would be great. I use "uses", but in the app and the controllers there are the 'controllers', 'views' and 'stores' configurations... I don't know which method they use internally.

4 Aug 2011, 10:51 AM
I'm beginning to think there is something deeply wrong with the SDK, or I'm losing my mind. I'm having the kind of problem that, if described to me, would make me roll my eyes and wonder how the person with the issue ever got as far as he did.

Working through a bare-bones app and moving up to my own application, I managed to build a production-ready minified file of my app, using "require" and "uses" appropriately. I was ready to write a long post on my experience for others having the same problems I managed to resolve.

I wanted to make one last test: I changed my include of ext-all.js to ext-all-debug.js and ran "sencha create". The created jsb3 file only included my own class files, and none of the ExtJS framework's. Strange, but fine. I reverted back to using ext-all.js. Same problem.

I went back through my code and made sure no changes were made to it that would result in what I was seeing. Nothing, but still had the problem. I went back to my bare-bones test app, verified that the jsb3 file previously created had all the framework classes, then ran "sencha create" on it. No framework classes, only my classes.

I can't begin to imagine what's going on here, or what I'm missing. The fact that the change from using ext-all.js to ext-all-debug.js seems to have triggered this anomaly seems most unlikely to me, and counter-intuitive, but I have no other explanation.

I love days like this.

Edit: Well, it's good to know I'm not losing my mind. Gotta love typos, and posting before finding them. :/

4 Aug 2011, 12:57 PM
So your generated jsb includes your classes? All of them? How did you achieve that?
I'm fine including ext-all.js and another file with all my classes... it's not the best thing but I could live with it...

4 Aug 2011, 1:00 PM
So your generated jsb includes your classes? All of them? How did you achieve that?
I'm fine including ext-all.js and another file with all my classes... it's not the best thing but I could live with it...

I just posted this thread (http://www.sencha.com/forum/showthread.php?142768-Using-the-SDK-tools), explaining how I got it to work successfully. Hope it helps.