Getting Started with Sencha Touch
What is Sencha Touch?
Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a browser or in a hybrid shell. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and BlackBerry devices.
- Download and unzip Sencha Touch. You can unzip the software to any directory.
- Sencha Touch requires Chrome or Safari. On a mobile device, you can use Chrome, Safari, or Internet Explorer 10 or 11.
- Sencha Cmd.
Sencha Touch 2.3.1 requires Sencha Cmd 4.0.1, 4.0.2, or later. To check that you have correctly installed Sencha Cmd, type the
senchacommand, for example:
$ sencha Sencha Cmd vn.n.n ...
- Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs the JRE to run. Note: If you are building an Android app using Windows, you must install the Java SDK. You can build an iOS app under Windows with the JRE, but not an Android app.
- Ruby to create the
compiled CSS used by Touch.
- Windows: Download Ruby from
Download the RubyInstaller
.exefile and run it.
- Mac: Ruby is pre-installed. You can verify its presence with the ruby -v command.
- Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.
- Windows: Download Ruby from rubyinstaller.org. Download the RubyInstaller
If you are running the IIS web server on Windows, manually add
as a MIME Type for Sencha Touch to work properly. For information on adding this MIME type
see the following link: http://stackoverflow.com/a/1121114/273985.
Extract the Sencha Touch download zip file, which can be in any directory.
Start your web server. If using the Sencha Cmd web server,
change directory to the location from which you want to serve your application,
and start the Sencha Cmd web server with the sencha web start command.
To stop the web server, press CTRL+C, or open another command line window and
sencha web stop.
If you are using another web server such as XAMPP (a pre-configured Apache HTTP server), create an app directory where your web server expects to find apps. In the case of XAMPP, it's the <XAMPP_install_dir>/htdocs directory.
Generating Your First App
Now that you have Sencha Touch and Sencha Cmd installed, you can generate an application.
Choose or create a directory where your application will reside, change to that directory, and issue the following command:
$ sencha -sdk /path/to/touch generate app MyApp .
- /path/to/touch is the directory where you unzipped the Touch software.
- MyApp is the name you give your application.
This generates a skeleton Sencha Touch application namespaced to the
and located in the current directory.
The skeleton app contains all the files you need to create a Sencha Touch application, including the default index.html file, a copy of the Touch SDK, the CSS file, and images and configuration files for creating native packages for your app.
You can verify if your application has generated successfully by opening it in a
web browser. If you extracted the SDK to your webroot folder,
http://localhost/MyApp. If you are using the Sencha Cmd web server,
you can access served applications with the
Note: If this command fails in Linux, re-install Sencha Cmd as a normal user versus installing with root privileges.
Explore the Code
The following listing provides a short description of each file and directory, the complete list of the generated files can be found in the Sencha Cmd documentation:
app- The directory containing the Models, Views, Controllers, and Stores for your app.
app.json- The configuration file for your app.
index.html- The HTML file for your app.
packager.json- The configuration file used by Sencha Cmd for creating native packages for your application.
resources- The directory containing the CSS and the images for your app
app.js, the main entry point for your app, in your editor.
launch function is the entry point to your application.
In the default application, hide the application loading indicator,
and create an instance of our Main view and add it to the Viewport.
The Viewport is a Card layout to which
you can add application components. The default app adds the
Main view to the viewport so it becomes visible on the screen.
Look at the code inside the Main view.
app/view/Main.js in your code editor and change a title line to:
title: 'Home Tab'
Then change another line as follows:
Also, change lines as follows:
html: [ "I changed the default <b>HTML Contents</b> to something different!" ].join("")
Refresh the app in your browser to see the effects of your changes.
Follow the First Application guide, which builds on this guide, and helps you create a simple but powerful app in around 15 minutes.
Note: As a good practice, when you create an application,
keep a copy of your
app.js file as Sencha Cmd also
updates this file.
If you would like to skip ahead or find out more detailed information about other aspects of the framework, view the following guides and resources:
- What's New in Sencha Touch
- Components and Containers
- Intro to Applications
- The Layout System
- The Data Package