Friday, April 25, 2014

Using Sencha Cmd for ExtJs

                 Sencha Cmd is a cross-platform command line tool that provides many automated tasks around the full life-cycle of your applications from generating a new project to deploying an application to production.
—    More info. @ http://docs.sencha.com/extjs/4.2.0/#!/guide/command

Sencha Cmd Installation:
Sencha Cmd is designed for Sencha Ext JS version 4.1.1a or higher and Sencha Touch version 2.1 or higher.
Steps to install Sencha Cmd:
1. Download and install a Java Run-time Environment or JRE. The JRE version must be at least JRE 6.
2. To build themes using Sass on Windows, download and install Ruby
3. Download and install Sencha Cmd.

Using Sencha Cmd:
Creating/generating the  application structure.
  • The following command is used to generate the app. Structure:
        sencha -sdk /path/to/SDK generate app MyApp /path/to/MyApp
  • You can refer the sencha  guide, for the exact structure generated using Sencha  Cmd.
  • All that is required to build your application is to run the following command:
         sencha app build

Custom Builds:
The following steps need to be followed for custom builds:
  • Add the following code in the html file:

    <!--<x-compile>-->
    <!--<x-bootstrap>-->
    <script src="../extjs/ext-dev.js"></script>
    <!--</x-bootstrap>-->
    <script src="app.js"></script>
    <!--</x-compile>-->
  • Create an output file with .html or .js extension. Suppose we create index.js
  • Use the following command to compile/build the all-classes file:
    sencha  compile  -classpath=app.js,../../extjs/src,(other custom utils/components) page -in=../app.html -out=index.js
  • The above command will generate an all-classes.js file, which has to be included in the app.html file. While including the generated all-classes file, remove the above added code and the includes for extjs library (ext-all.js) and app.js
  • Also, to generate the app-classes file as a compressed file using YUI, use the following command:
    sencha  compile  -classpath=app.js,../../extjs/src,(other custom utils/components) page -yui -in=../app.html -out=index.js
  • The ux components can be added to the ux folder in the source and would be referred from there. Incase you define custom components and do not want to add them as ux, you can add them to the classpath