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.
7 Comments
Sel
October 27, 2012Thanks 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.
Ian
November 5, 2012While 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.
Matt
November 5, 2012I 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.
Garcinia Today Diet
September 6, 2013Good article. I am experiencing some of these issues as well..
funny games online
October 14, 2013Hey! 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!
Tapas
October 15, 2013I 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.
Matt
October 15, 2013This article is not up to date with the current Sencha version. Try looking at the Sencha 2.3 Docs for help!