Sencha Touch - Overview

What is Sencha Touch

Sencha Touch is a popular framework of Sencha which is for creating user interface for mobile application.
It helps developer to create an mobile app using simple HTML, CSS, JS which supports many mobile devides such as android, IOS, BlackBerry, Windows.
It is based on MVC architecture. The latest version of Sencha Touch is 2.4.

Sencha Touch - Overview

Try it Option Online

We have set up Sencha Touch Programming environment online, so that you can compile and execute all the available examples online. It gives you confidence in what you are reading and enables you to verify the programs with different options. Feel free to modify any example and execute it online.

Sencha Touch - Naming Convention

Naming convention is a set of rule to be followed for identifiers.
It makes code more readable and understandable to the other programmers as well.
Naming convention in Sencha Touch follows the standard JavaScript convention which is not mandatory but a good practice to follow.

Sencha Touch - Architecture

The bottom layer for any mobile application is OS on top of that any or everything is built upon. then we have the browers on which we will be running the we applications. It could be Chrome , Safari, IE anything. the upper layer to all that is a W3 standards which are common for all.

Sencha Touch - MVC

MVC stands for Model View Controller. It is an architectural pattern which separates application into logical components making it more manageable.
The below diagram shows how MVC archtecture works:

Sencha Touch - First Program

This chapter list down the steps to write first Hello World program in Ext JS:

Step 1

Create index.htm page in an editor of our choice. Include the required library files in head section of html page as mentioned below:
index.htm

<!DOCTYPE html>

Sencha Touch - Builds

Today's demand for a web application is to develope the fast application with less development efforts.
Sencha touch helps in doing so with the ease as it provide number of build libraries to choose based on development or production code along with the facility to create custom build.

Sencha Touch - Migration

Sencha touch comes with various rectification from the earlier version.
Sencha touch 2 comes with the backward compatibility build which makes the migration process easier from version 1.x to 2.x.

Sencha Touch - Core Concept

Sencha touch has various core concepts such as class system, ajax , contollers etc.
Below you can find the link for the core concepts of sencha touch.

Concept and Description Link
Class System
Components
Controllers
BlackBerry support
Use of Ajax

Sencha Touch - Data Package

Data package in Sencha touch is responsible for doing any kind of data manipulation either storing or loading the data.
Data packages are related to model, store and proxies.

Sencha Touch - Theme

Sencha touch provides a number of themes to be used in your applications. You can add different theme in place of classic theme and see the difference in output based on the device we are using for the application.This is done simply by replacing theme CSS file as explained below.

Sencha Touch - Device Profile

In today's world of technologies, we have multiple devices such as mobile, tablet, desktop, laptop with different screen sizes.
So to develop applications which are accessible from all the devices with good look and feel is must need.
As there may be possibilities that some functionalities are required and important only for some specific devices not for all.

Sencha Touch - Dependencies

There are certain ways defined in Sencha touch to declare dependencies one with in the application other inside the classes.
Here we will see different ways to define dependencies.

Sencha Touch - Environment Detection

It helps you in identifying which operating system you are using, which browser you are working on and what are the features available for your environment.
So sencha touch provides you different function to get information specific to the environment.
All the methods mentioned below can be checked in if condition as if(Ext.os.is.Windows){} and based on the condition tasks can be performed.

Sencha Touch - Events

Events are something which get fired when something happens to the class. For example when a button is getting clicked or before/ after element is rendered.

Methods of writing events:

1. Built in events using listeners
2. Attaching events later
3. Custom events

Sencha Touch - Layout

Layout is the way the elements are arranged in a container. That could be horizontal, vertical or any other. Sencha Touch has different layout defined in its library but we can always write custom layouts as well.

Sencha Touch - History Support

Sencha touch comes with the full history support and deep linking facilities.
It has simplest back button functionality which helps user to navigate between the screens without even refreshing the page or application.

Sencha Touch - XHR2

Sencha touch provides XHR2 confiuration to work with Ajax and Ajax2 development.
XHR2 is xmlHttpRequest level2 , which used to request data from server. For any web application data resides at the server and once the page is loaded the data should be accessed from server with the help of Ajax requests.

Sencha Touch - View Components

Sencha touch provides various UI components which can be customised according to requirements.

S.N.	Component
1	CarouselThis UI component is used to display Carousel.
2	ListThis UI component is used to display lists.
3	Nested List

Sencha Touch - Packaging

Sencha touch comes with the native packaging feature.
Below you can find the link for native packaging concepts of Sencha touch.

Concept and Description Link
Native iOS provisioning
Native APIs