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
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 :
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<!-- </x-bootstrap> -->
<!-- </x-compile> -->
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 :
enabled : true
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.