Using Sencha Cmd and Ext Scheduler.

Recently Sencha released the third version of their build tools, now named ‘Sencha Cmd’. Compared to the previous editions, Sencha Cmd adds much more functionality (take notice, that Cmd works only with Ext 4.1.1a/Sencha Touch 2.1b3, or higher). For a complete list of new features and a thorough installation guide please consult Sencha’s guide. In this post we will focus on the `build`/`refresh` commands which are used to organize a JavaScript application (and its resources) in a more optimized server-suitable form.

Creating the application

Let’s start with creating a simple project. Since Sencha Cmd requires application to use MVC-architecture, first make sure you’re familiar with this concept in ExtJS.

sencha -sdk /path/to/SDK generate app MyApp /path/to/MyApp

Running this command will give us a basic `MyApp` application structure. The next step is to copy the `Sch` folder from our Scheduler SDK to your application libraries folder. Now we’ll have to add path to the sources copied a moment ago to the application config file which will tell the compiler where to look for the dependency classes. Open `.sencha/app/sencha.cfg` with your editor and add the correct path there (either an absolute path or path to `lib` folder. Note that there can’t be any spaces between the paths) :

[crayon striped=”false” nums=”false” toolbar=”false”]
app.classpath=${app.dir}/app,${app.dir}/lib/Sch
[/crayon]

Then we’ll have to modify the index.html imports to help the Cmd engine to understand our setup. Open the file and modify the page header adding the following imports in `x-bootstrap` tags :

[crayon striped=”false” nums=”false” toolbar=”false”]
<!– <x-compile> –>
    <!– <x-bootstrap> –>
         <script src=”ext/ext-dev.js”></script>
         <script src=”bootstrap.js”></script>
    <!– </x-bootstrap> –>
<script src=”app/app.js”></script>
<!– </x-compile> –>
[/crayon]

The last thing that requires modification is the `app.’s` file. Add this code at the top of this file, to configure Ext Loader properly :

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath(‘Sch’, ‘./lib/js/Sch/’);
[/crayon]

At this point we can start building our application, starting by defining stores, views and controllers in the `app.js` file or adding them from the command line with Cmd. A sample MVC project can be found in our SDK examples folder.

Building the application

When the application structure is ready we can build it with Cmd :

sencha app build

After the operation has finished we should get a new directory named after our application in the `build` folder. During the development phase we need to run another Cmd command – refresh – each time we add, rename or remove a class :

sencha app refresh

Refresh will update the metadata file “bootstrap” containing data for the dynamic loader and class system.

Summing it up

We hope that this post will let you get started with building applications using Sencha Cmd along with our products. Additional information and a Cmd-ready ‘mvc’ sample example can be found in our Ext Scheduler SDK.

Click here to download Sencha Cmd, and here is the Cmd community forum.