Sencha Touch 2.1.0 Beta 3 – Hello World App

Sencha Touch 2 is a mobile web app JavaScript framework, based on the Ext.JS framework. Check out Sencha Touch 2, if you haven’t already. This framework is similar to jQuery Mobile and Kendo UI, but has some added features making it a bit more powerful.

Developer Notes:

  • Used Mac OSX Lion 1.7.4
  • Sencha Touch SDK docs located in sdk folder under docs. Check them out, but fair warning with Beta, they can be outdated.
  • Sencha Cmd has a decent (for Beta) help menu via Terminal. Try:
    $ sencha help
    $ sencha help app build
    $ sencha help generate app
    $ sencha help package

    etc
  • I did not edit directly from a live web server. It may be fine, but I don’t encourage it.

Installation

Link to Forum Announcement:
Sencha Touch 2.1.0 Beta 3 is available

Download Links:
Sencha Touch 2.1.0 Beta 3:
http://dev.sencha.com/deploy/sencha-touch-2.1.0-b3.zip
Sencha Cmd 3.0.0.122:
http://dev.sencha.com/deploy/SenchaCmd-3.0.0.122-osx.app.zip

Uninstall Existing Sencha SDK Tools

First uninstall any Sencha Cmd (or Sencha SDK Tools as it was formerly called).

To Uninstall Sencha SDK Tools:

Navigate to the directory it was installed in, check:
/Applications/Sencha
/Applications/SenchaSDKTools

or any similar folder
Locate the uninstall.app file, and run it to uninstall Sencha SDK Tools (or Sencha Cmd)

To install the new Sencha Cmd 3.0.0.122:

Close any open Terminal windows, and close Terminal entirely as a safety measure
Run the .app file contained in the zip.
For the installation directory, either choose:
/Users/[username]/bin (default, which is the same as ~/bin) or
I used /Applications to find it easier if I needed later on
It installs to [installation directory]/Sencha/Cmd/3.0.0.122/

To check if it installed correctly:

Open up a new Terminal window/shell
Run the command:
$ sencha
This should output: (including options for parameters below it)
Sencha Cmd v3.0.0.122

Install Sencha Touch

Unzip the zip file in a directory where you will develop Sencha apps from. For example, I used:
~/Sencha
This is your Sencha Touch SDK directory, for example:
~/Sencha/sencha-touch-2.1.0-beta3

Generate and Package Apps

Generate an App using Sencha Cmd

Open up a new Terminal window/shell
Navigate to your Sencha Touch SDK directory, for example:
$ cd ~/Sencha/sencha-touch-2.1.0-beta3
Use the sencha command to generate a new app:
$ sencha generate app [appname] [app folder]
Usually its best to have the app be located near your SDK, for example:
$ sencha generate app helloworld ../helloworld
Which results in ~/Sencha/helloworld app scaffolding being created
Navigate into your new app’s folder, and open it with your favorite text editor, like:
$ cd ../helloworld
$ mate ./

Note: It is important to be in the app’s folder, for possible Sencha Terminal commands later on

In your text editor, open the app.js file, and add the lines to the very top: (if they are not present)

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src'
});
//</debug>

This loads the SDK from the touch/src folder, which was generated by Sencha Cmd 3.0.0.122 using sencha generate app [appname]

Make any changes to the app you wish, make sure it works by copy and pasting the helloworld folder to an accessible web server, such as ~/Sites/ or MAMP’s htdoc folder, etc. and then running it in a modern browser. (This guide assumes you have one set up).
Tip: In Chrome use COMMAND+OPTION+I to open up Developer Tools. Use the Console tab to see any JavaScript errors.

Package an App using Sencha Cmd   

The benefits of packaging an app are found in the Sencha Touch SDK docs. I would suggest you check those out, but be warned, as they can be outdated since this is a Beta release, which is why I created this guide as well.

Packaging an App

Open up a new Terminal window/shell
Navigate to your app’s directory, for example:
$ cd ~/Sencha/helloworld
To package the app into a minified compact package, run this command:
$ sencha app build package
By default (you can change this in app.json) the app is packaged to builds/[appname]/package
Note: You may see [WARN ] outputs, like Call to Ext.require detected in non-root positon.
Try copy and pasting the newly created package folder to your web server (or symlinking it, much better). The folder (or symlink) does not have to be the same name as the app.

Sencha Touch 2.1.0 Beta 3 Package to Native iOS

In the next article, I will discuss how to package a Sencha Touch 2.1.0 Beta 3 app to run in the iOSSimulator, as well as packaging it for iOS, in the ad-hoc/enterprise app store fashion.

Matt

Written by Matt

7 Comments

  1. avatar
    Sel
    October 27, 2012

    Thanks for the tut. However, what I’d like to know is how to compile a project (using cmd 3) that was NOT a generated app. Say if you already have all the sources present in an MVC setup and just want to feed it to the compiler.

    • avatar
      Ian
      November 5, 2012

      While compiling with Cmd 3 with existing sources (MVC JS files from scratch, Sencha SDK Tools, etc) may be possible, finding or constructing a workaround might not be worth the effort. Generating a blank Cmd 3 app and copy/pasting the MVC files into the newly generated app would be the easiest way in my opinion. This also ensures everything is set up correctly.

    • avatar
      Matt
      November 5, 2012

      I would also suggest starting from scratch with a generated Cmd 3 app. But for more information on Sencha Cmd 3, here are some links:

      Finding the solution might be harder then actually moving the sources to a skeleton Cmd 3 generated app, depending on the app size. Hope that helps.

  2. avatar
    Garcinia Today Diet
    September 6, 2013

    Good article. I am experiencing some of these issues as well..

  3. avatar
    funny games online
    October 14, 2013

    Hey! I coulld have sworn I’ve been to this website before but after reading through some of the post I realized it’s
    new tto me. Nonetheless, I’m definitely happy I found it and I’ll be bookmarking and checking baack frequently!

  4. avatar
    Tapas
    October 15, 2013

    I have extracted sencha 2.3.0, but i haven’t create index file form my application folder, there are create 5 folder and 1 xml files, so i haven;t run my application.

    • avatar
      Matt
      October 15, 2013

      This article is not up to date with the current Sencha version. Try looking at the Sencha 2.3 Docs for help!