View Full Version : Using the SDK tools

4 Aug 2011, 12:43 PM
After a couple of unsuccessful starts using the SDK, I managed to pinpoint the issues I was having. Most of my issues had to do with appropriate use of Ext.Loader.require() and the class config option "uses" in my classes. I found that when these were utilized correctly, the SDK was easy to use.

I apologize for the long post, but I thought this might help beginners with the sencha command, like me, with getting started quickly.

Write your application using the recommended architecture outlined in the Getting Started Guide (http://docs.sencha.com/ext-js/4-0/#/guide/getting_started). For best practices, the directory structure you use should reflect that shown in the guide under section 2.1, "Basic Structure".

The entry point index file (typically "index.html" in the root directory of your app) will contain one script tag to load the ExtJS framework file, and one to load the file containing your application logic. Before building with the SDK, your entry point index file "index.html" might look like this:

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My App</title>
<style type="text/css">
@import url('extjs/resources/css/ext-all-gray.css');

<script src="extjs/ext-debug.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>


It's very important to use the correct ExtJS framework file before you build your minified application. You can use ext-all-debug.js while writing your application and class files and testing your app, but before building, you must use ext-debug.js, or the relevant framework class files will not be included when you create your jsb3 file.

Your application logic file "app.js" will typically consist of calls to the loader, calls to Ext.require(), and a call to Ext.application() to create an instance of Ext.app.Application. The application instance will load all the required class files for the models, stores, views, and controllers you've written.

The logic file might look like this.

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

// Required source files

name: 'MyApp',
controllers: [...],

launch: function() {
// Code to execute after launch

One issue I found was that it was not possible to subclass Ext.app.Application and create it using Ext.create() inside a call to Ext.onReady(). The SDK did not include any of the relevant classes needed during the build when this was the case. Use Ext.application() in your logic file to initiate your app.

In order to correctly load files required by your application, you may need to use Ext.require(). In my case, a call to Ext.Loader.setPath() was needed to tell the loader how to parse the namespaces used by my classes before the call to Ext.application(). In this way, I was able to load, for example, MyApp.view.Viewport, ensuring its class file's inclusion in the build.

I also found that in my viewport's class definition, I had to utlize the "uses" config option to include ExtJS's border layout class:

uses: ['Ext.layout.container.Border']

If this was not done, the relevant ExtJS class file was not loaded, and the SDK build would not include it. The result was that ExtJS attempted to load the class file separately on running the app, which will not work in the production environment. I similarly had to "uses" other ExtJS classes in my other class definitions, such as "Ext.form.field.Radio".

In the directory for your app, run the "sencha create jsb" command according to the examples given in the documentation. For example:

sencha create jsb -a index.html -p app.jsb3

where index.html is your app entry file, and app.jsb3 is the jsb3 file to output. If your directory structure deviates from the recommended one, the SDK seems to assume that your application is "built on top of a dynamic server-side language" according to the docs, whether or not that's actually the case. You will then need to prepend index.html with its URL path:

sencha create jsb -a http://localhost/app/index.html -p app.jsb3

Your jsb3 is now created. It includes the directory paths and file names for all the ExtJS and custom classes your app uses. You may need to globally edit the paths, especially if you did not prepend your entry point index.html file with its URL. In my tests, the SDK did not seem to handle directory paths with spaces well, and seemed to add too many ".." directory traversals.

Once the jsb3 file is created, run the "sencha build" command:

sencha build -p app.jsb3 -d .

This will build all-classes.js, which contains all framework and custom classes needed to run your app, and app-all.js, which will build your production-ready minified JavaScript file. You are then ready to use it in production. Replace the script tags in your app's index entry file with the following:

<script src="extjs/ext.js" type="text/javascript"></script>
<script src="app-all.js" type="text/javascript"></script>

Note that the framework file you need to use in production is ext.js.

The result is a much smaller payload than you would have using ext-all.js with a minified file containing just your classes. However, in my version of app-all.js, there were included classes that were not used by my application, such as Ext.layout.component.ProgressBar. Unless this class is used by the layout in a way that isn't obvious, it seems the resulting app-all.js is not as efficient as it could be. However, it is still more efficient than using ext-all.js.

13 Aug 2011, 1:49 AM
Great, thank you for your job!

Next time I will try to overcome SDK Tools from Sencha, I will try to do it with your solution! :)

24 Oct 2011, 4:44 AM
Sorry Korax, I have a problem with building. Please, are my require statements correct ?


4 Jan 2012, 11:09 AM
+1, this post should be stickied. It covers all of the basic problems I've run into in the last few days messing with the sdk tools. Great post, thanks.

17 Jan 2012, 8:16 PM
Despite the forum posts, (weak) documentation, and my own trial and error, I am still having issues with this.

My MVC app works fine in development. I have built the empty jsb3 file and filled in the files part to include everything. When I deploy and run it, it complains about missing stores/models/views. Coincidentally, every one of those stores/models/views are in the FIRST listed controller in my app.js Ext.Application controllers: [] section.

So that tells me that this controller is loading, but all the inner classes (stores/models/views) are not being found.

I figured when you ran "sencha create jsb" that it would start at your index.html and drill in to all the dependent files and build a jsb3 file that includes everything needed to build. Perhaps that's what it SHOULD be doing, but all I get is the skeleton jsb3 file, which is not useful.

20 Apr 2012, 1:26 PM
Thanks you for the post! It shoul be included in the documentation !

24 Apr 2012, 11:23 PM
Thanks for this post !

I've never, and will never, figure out how to WELL BUILD A PROD package !

But, one thing we have to notice there :

Why Sencha Dev team does not give a REAL and functional documentation and "How To" to do this ? :-?

I'am a "supported user" (not with that pseudo/user), we, at my office, buy the 40 tickets for support, and do we have to use one of those tickets to have this kind of "procedure" ?

So, to the Sencha Team : You have produced a real real good framework (not perfect, but really awesome), why the documentation is so weak, poor, not well explained ?
I think it is time for you to push into the good direction that's missing : Documentation !

This will put you on the top of JS framework, which is the "future" of dev on the web !


ps : all works really fine using the "uses" config !

pps : Now i'am getting a 720ko all-in-one JS file (app-all.js) where i've got, before, a 50ko file plus 3,3MB loading dependencies ;-)

27 Apr 2012, 5:26 AM
The whole "uses" versus "requires" is a pain! requires feels more natural, but uses is way more important.

10 May 2012, 5:16 AM
I have created the jsb3 file but, sencha build command is not generating app-all.js file... can you help me

here is the jsb3 file

{ "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": []