In this tutorial you will find the step by step procedures to setup Sencha Touch 2.1 with Sencha Cmd for PhoneGap 2.  Please note, the build tool for Sencha Touch 2 has changed from Sencha SDK tool 2.0.0 to Sencha Cmd 3.0.0.  The buildpaths “build/assets/www” you used to modify to deploy the 2.0 app into will not work. (i.e. even if you have changed the buildpath to build/assets/www, sencha will package the app into build/<app name>/<build type>/<appname> instead).  I have a workaround, see  below for more info.


 

Step 1: Download and install Sencha Cmd v3.0.0

1.1 Instructions and system requirement can be found here:

http://www.sencha.com/products/sencha-cmd/download

1.2 Once it is installed, run the “sencha” command to verify

Note 1: Sencha Cmd is a build tool for Sencha Touch 2.1, if you are using Sencha Touch 2.0, please refer to my other tutorial.

Note 2: If you are using Windows, please add Sencha Cmd to the Path environment variable

 

Step 2: Download and install Sencha Touch 2.1 SDK

2.1 Instructions and system requirement can be found here:

http://www.sencha.com/products/touch/download/

For this tutorial, Senca Touch 2.1.0-gpl version is used.

Note: It is a zip file. So just unzip it.

 

Step 3: Generate a Sencha Touch 2.1 application

3.1 Use the sencha command to generate an app

at the prompt, run

$ sencha -sdk </path/to/sdk> generate app <app name> <path/to/app>

e.g.

 
$ sencha -sdk /sandbox/dev/sencha-touch-2.1.0-gpl Demo /sandbox/appSrc/Demo

3.2 Get phonegap ready by copying the cordova-2.1.0.js file to the <path/to/app> folder
e.g.

 
cp cordova-2.1.0.js /sandbox/appSrc/Demo

3.3 Prepare a build environment for PhoneGap

3.3.1 change directory to root of app folder

$ cd /sandbox/appSrc/Demo

3.3.2 make a build directory

$ mkdir build

3.3.3 Edit app.json file located in the root of the app folder and add cordova-2.1.0.js to the “js” section

$ vi app.json

add cordova-2.1.0.js, like the following:

"js": [
{
"path": "cordova-2.1.0.js"
},
{
"path": "sdk/sencha-touch-all.js"
},
{
"path": "app.js",
"bundle": true,
"update": "delta"
}
]

 

Step 4: Setup the build environment so that the package will be deployed to the assets/www directory

4.1 cd to .sencha/workspace under the app root folder and then edit the sencha.cfg file

e.g.

$ cd /sandbox/appSrc/Demo/.sencha/workspace

$ vi sencha.cfg

4.2 comment out the existing workspace.build.dir line (by adding a “#” at the start of the line) and replace it with 2 new environment variables:

comment out original workspace build path

#workspace.build.dir=${workspace.dir}/build/${app.name}

then add the following 2 lines and save the file

workspace.build.dir=${workspace.dir}/build
phonegap.assets.www.dir=assets/www

4.3  Now edit the build configure file to tell it to use the above variable

e.g.

$ vi /sandbox/appSrc/Demo/.sencha/app/build-impl.xml

4.4 locate the “enviroment setters” section and then rename the value of the package target from “package” to “${phonegap.assets.www.dir}

e.g.

<target name="package">
        <property name="args.environment" value="${phonegap.assets.www.dir}"/>
</target>

Step 5: Install Compass

$ gem update --system
$ gem install compass

or on a Mac

$ sudo gem update --system
$ sudo gem install compass

Step 6: Copy cordova js to the root of the application

$ cp <path to phonegap sdk>/lib/android/cordova-2.1.0.js /sandbox/appSrc/Demo

Step 7: Now you are ready to build the Sencha Touch 2.1 app for PhoneGap

7.1 cd to the root of the application, create the build directory

$ cd /sandbox/appSrc/Demo/
$ mkdir build

 

7.2 cd to the root of the application and run the sencha app build command

$ cd /sandbox/appSrc/Demo/
$ sencha app build -e package