Getting Started with Sencha Touch 2

By Rohit GhatolArchitect @ Synerzip

Founder TechNext

Topics

• Introduction to Sencha Touch 2 - 30 mins• Coding first Sencha Touch 2 App – 60+ mins

Introduction to Sencha Touch 2

• JavaScript Framework Categories• What is Single Page Application?• What Sencha Touch 2 Covers?• Building blocks of Sencha Touch

• Development Environment Setup

JavaScript framework Category

HTML 5

MVC MVP MVVM

Micro Template

AMD

Routers & History

Data Bound Views

JavaScript Class

System DOM Manipulati

on

CSS Generation

Device Profiles

Native Packaging

Production Packaging

JavaScript framework Category

HTML 5

MVC MVP MVVM

Micro Template

AMD

Routers & History

Data Bound Views

JavaScript Class

System DOM Manipulati

on

CSS Generation

Device Profiles

Native Packaging

Production Packaging

Single Page Application

Stamped

What does Sencha Touch 2 Covers?

HTML 5

MVC MVP MVVM

Micro Template

AMD

Routers & History

Data Bound Views

JavaScript Class

System DOM Manipulati

on

CSS Generation

Device Profiles

Native Packaging

Production Packaging

Sencha Touch Building blocks

Sencha Touch SDK

Sencha Touch SDK Tools

Sencha Touch Building blocks

Sencha Touch Building blocks

Sencha Touch 2 Class System

Sencha Touch 2 MVC Framework

Ext.define(‘FirstApp.view.Main’,{ extend:’Ext.Panel’, config:{ title:’My Panel’, iconCls:’home’ }});

<? Extends Ext.Container>

<? Extends Ext.data.Model>

<? Extends Ext.app.Controller>

Sencha Touch Building blocks

Data Driven Views Store

Proxy

Reader

Layouts

Templates

ajax

localstorage

json

xml

….

….

fit

card

hbox/vbox

docked

Sencha Touch Building blocks

Profiles Routers & History

Phone Tablet ….. http://abc.com/#tab1/treeitem2

http://abc.com/#tab2/treeitem1

http://abc.com/#item12/

Sencha Touch Building blocks

LifeCycle Native Packaging

Controller

Profile

Application

Controller

Init(application)

launch()

launch()

launch()

Android APK

iOS iPA

Code Demos

Part 1 – Getting Startedhttp://www.udemy.com/lectures/sencha-touch-2-getting-started-with-sencha-touch-2-73242

Part 2 – Using LocalStoragehttp://www.udemy.com/lectures/getting-started-with-sencha-touch-2-using-localstorage-73745

Part 3 – Using Profileshttp://www.udemy.com/lectures/sencha-touch-2-understanding-sencha-touch-2-profiles-73954

Q & A?