Using the SDK tools
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. 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:
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.Code:<!DOCTYPE html> <html lang="en"> <head> <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'); </style> <script src="extjs/ext-debug.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </head> <body> </body> </html>
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.
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.Code:// Set up loader Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('MyApp', 'app'); // Required source files Ext.Loader.require('MyApp.view.Viewport'); Ext.application({ name: 'MyApp', controllers: [...], launch: function() { // Code to execute after launch } });
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:
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".Code:uses: ['Ext.layout.container.Border']
- In the directory for your app, run the "sencha create jsb" command according to the examples given in the documentation. For example:
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:Code:sencha create jsb -a 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.Code:sencha create jsb -a http://localhost/app/index.html -p app.jsb3
- Once the jsb3 file is created, run the "sencha build" command:
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:Code:sencha build -p app.jsb3 -d .
Note that the framework file you need to use in production is ext.js.Code:<script src="extjs/ext.js" type="text/javascript"></script> <script src="app-all.js" type="text/javascript"></script>
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.
Reply With Quote
