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) :

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 :

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 :

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>