This document provides an overview of building a first application in Sencha Touch. It discusses that Sencha Touch enables creating mobile apps that work across devices and feel native. It outlines the software requirements and typical app structure of single HTML file, JS files, and CSS files. It describes the starting points of Ext.setup() or Ext.application for non-MVC and MVC apps respectively. It also discusses the Ext.Viewport container and alternatives to it.

1. FIRST APPLICATION IN
SENCHA TOUCH
- NITHYA
1

2. What is Sencha Touch?
 Sencha Touch enables you to quickly and easily create HTML5 based
mobile apps that work on Android, iOS and Blackberry devices and
produce a native-app-like experience inside a browser.
© 2010, Cognizant Technology Solutions. Confidential 2

3. Software Requirements
 Mandatory:
» A web server running locally on your computer
» A modern web browser; Chrome and Safari are recommended
» Downloaded Sencha Touch SDK
 Optional:
» SDE like Eclipse for J2EE
» iOS SDK, Emulator
» Android SDK, Emulator
© 2010, Cognizant Technology Solutions. Confidential 3

4. Application Structure
 Single HTML File
 One or more JS files
 One of more CSS files
© 2010, Cognizant Technology Solutions. Confidential 4
Project
app
controller model
store view
app.js
data touch
resources
css
css-
debug
sass themes
icons images
lib
lib-debug
lib-
minified
HTML-
page

5. Starting point in Sencha Touch Applications
 Ext.setup() is the entry-point to initialize a Sencha Touch application.
 This sets up the viewport, initializes the event system, instantiates a
default animation runner, and a default logger (during development).
 When all of that is ready, it invokes the callback function given to
the onReady key.
© 2010, Cognizant Technology Solutions. Confidential 5

6.  If your application makes use of MVC architecture,
use application instead.
 Ext.application is used to create an application instance
 Loads Ext.app.Application class and starts it up with given configuration
after the page is ready
© 2010, Cognizant Technology Solutions. Confidential 6
Starting point in Sencha Touch Applications - MVC

7. Viewport
 Ext.Viewport is a instance created when you use Ext.setup.
 Because Ext.Viewport extends from Ext.Container, it has as layout (which
defaults toExt.layout.Card). This means you can add items to it at any
time, from anywhere in your code.
 The Ext.Viewport fullscreen configuration is true by default, so it will take
up your whole screen.
© 2010, Cognizant Technology Solutions. Confidential 7

8. Alternative to Viewport
 By defining the fullscreen property on a component, it will automatically
be added to the Viewport.
© 2010, Cognizant Technology Solutions. Confidential 8