By:- Neha Upadhyay

Topics to be covered Getting Started

Using Sencha Commands

Class System in Sencha 2

Anatomy of an Application

What is Sencha Touch?

•Ans: 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.

•That is the sencha touch app runs on your device as if it’s a native application of your device.

Things you'll need The free Sencha Touch 2.0 SDK and sencha touch

commercial folder (which can be downloaded from sencha.com)

A web server running locally on your computer

A modern web browser; Chrome and Safari are recommended.

Pre-requisites. You need to know javascript.

Html 5

Css-3

Object oriented concepts.

Environment Setup. Step 1: Setup an HTTP server on your computer if you don't

have one running. This guide assumes that the host name is localhost, and the document root is at /path/to/www

Step 2: Download and install the latest SDK Tools on your development machine. The latest version as of this writing is 2.0.0 beta.

Step 3: Download the latest Sencha Touch 2 SDK. Extract the SDK to a local directory.

Please note that both the folders should be in the same directory.

It is advisable to keep them in root directory so that their path is C:/ or D:/ or E:/.

Building your first App. Sencha touch 2 provides us sencha commands which

can be used to create sencha applications and build the for various platforms.

The tool consists of many useful automated tasks around the full life-cycle of your applications, from generating a fresh new project to deploying for production.

To use sencha commands first you need to be sure that sencha 2 SDK has been properly installed in your machine.

Steps to verify installation1. Open your command prompt and cd into the sencha

–touch commercial folder.

cd/path/to/sencha-touch-2.0.0-commercial

2. Now verify that “sencha” Command is working properly on your machine:

cd/path/to/sencha-touch-2.0.0-commercial

sencha

If a help message appears with the first line that says: "Sencha Command v2.0.0 for Sencha Touch 2", you are all set.

Points to remember When you try “sencha” command for the first time it

may say:

“The system cannot find the path specified.”

Don’t worry just try it once more.

If still it fails to work please install your sdk properly.

Commands sencha generate app MyApp ../MyApp

This command generates a new MyApp folder at the specified path.

Your application structure will look like.

Other sencha commands. sencha generate controller UserController

(creates a file “UserController” in the controller folder)

sencha generate model User –fields=id:int,name,email

(creates a file “User” in the model folder)

(Note:-

1. “If you type a wrong sencha command the command prompt will display the Error message along with the correct syntax for the command”

2. All these related command should run inside the application folder. “MyApp” in this case.)

Understanding Your Application's Structure

Deploying your ApplicationWhen it comes to deployment, Sencha Command

provides 4 different build environment options, namely 'testing', 'package', 'production' and 'native':

'testing' is meant for QA prior to production. All JavaScript and CSS source Files are bundled, but not minified, which makes it easier for debugging if needed

'package' creates a self-contained, re-distributable production build that normally runs from local file system without the need for a web server

'production' creates a production build that is normally hosted on a web server and serves multiple clients (devices). The build is offline-capable using HTML 5 application cache, and has built-in over-the-air delta updating feature

'native' first generates a 'package' build, then packages it as a native application, ready to be deployed to native platforms

sencha app build production

sencha app build native.

Class SystemExt.define(‘MyPanel',

extend:’Ext.Panel’,

Config:{

html: 'Welcome to my app',

fullscreen: true

});

Ext.create(‘MyPanel’);

Ext.define allows us to create a new class.

extend helps us to extend an existing class (Ext.Panel in this case).

Config is used to set the configuration of the class. As we extend a Panel we can use all the configs of a panel.

Ext.create creates an instance of ‘MyPanel’

Model View of Sencha

Models: represent a type of object in your app – which define the fields of the data structure in which you will save the data. The fields represent the columns of a table.

Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch

Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly.

Stores: are responsible for loading data into your app and power Components like Lists and DataViews

Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible

Ext.application(

{ name: 'MyApp',

models: ['User', 'Product', 'nested.Order'],

views: ['OrderList', 'OrderDetail', 'Main'],

controllers: ['Orders'],

launch: function() {

Ext.create('MyApp.view.Main');

}

});

Launch Process Note that only the active Profile has its launch

function called - for example if you define profiles for Phone and Tablet and then launch the app on a tablet, only the Tablet Profile's launch function is called.

This is the point from where the application starts initialization.

•A controller is the place where we deal with data massaging and application logic.

•It is called when an event occurs, such as “tap” on a button.

Launch There are 4 main phases in your Application's launch

process, 2 of which are inside Controller.

1. Firstly, each Controller is able to define an initfunction, which is called before the Application launch function.

2. Secondly, after the Application and Profile launch functions have been called, the Controller's launch function is called as the last phase of the process:

Controller #init functions called

Profile #launch function called

Application #launch function called

Controller #launch functions called

Refs Ext.define('MyApp.controller.Main', {

extend: 'Ext.app.Controller',config: {refs: { nav: '#mainNav' }},addLogoutButton: function() {this.getNav().add({ text: 'Logout' });}});

Usually, a ref is just a key/value pair - the key ('nav' in this case) is the name of the reference that will be generated, the value ('#mainNav' in this case) is the ComponentQuery selector that will be used to find the Component.

Advanced Refs config: {

refs: { nav: '#mainNav', infoPanel: { selector: 'tabpanel panel[name=fish] infopanel', xtype:

'infopanel',

autoCreate: true

} } }

We've added a second ref to our Controller.

Again the name is the key, 'infoPanel' in this case, but this time we've passed an object as the value instead.

This time we've used a slightly more complex selector query - in this example imagine that your app contains a tab panel and that one of the items in the tab panel has been given the name 'fish'.

Our selector matches any Component with the xtype 'infopanel' inside that tab panel item.

Control The sister config to refs is control. Control is the

means by which your listen to events fired by Components and have your Controller react in some way. Control accepts both ComponentQuery selectors and refs as its keys, and listener objects as values - for example:

Routes As of Sencha Touch 2, Controllers can now directly

specify which routes they are interested in. This enables us to provide history support within our app, as well as the ability to deeply link to any part of the application that we provide a route for.

Before Filters config: {

before: { editProduct: 'authenticate' },

routes: { 'product/edit/:id': 'editProduct' }

},

•From the user's point of view, your application is just a collection of views.

•Although much of the value of the app is in the Models and Controllers, the Views are what the user interacts with directly.

• In this guide we're going to look at how to create the views that build your application.

ViewPort Every application consists a main container called

viewport in which all the views of the application are rendered.

The first view of the application is added in the launch method of the application.

launch: function() {

// Initialize the main view

Ext.Viewport.add(Ext.create('GS.view.Main'));

}

Using Existing Components The easiest way to create a view is to just

use Ext.create with an existing Component. For example, if we wanted to create a simple Panel with some HTML inside we can just do this:

Ext.create('Ext.Panel',

{

html: 'Welcome to my app',

fullscreen: true

});

Ext.define('MyApp.view.Welcome',

{ extend: 'Ext.Panel',

config:

{

html: 'Welcome to my app', fullscreen: true

}

});

Ext.create('MyApp.view.Welcome');

This is the pattern we'll normally want to follow when building our app - create a subclass of an existing component then create an instance of it later. Let's take a look through what we just changed:

We followed the MyApp.view.MyView convention for our new view class. You can name it whatever you like but we suggest sticking with convention

Any of the config options available on Ext.Panel can now be specified in either our new class's config block or when we come to create our instance.

A Real World Example

We've used a couple of new options this time:

requires - because we're using a searchfield in our items array, we tell our new view to require the Ext.field.Search class. At the moment the dynamic loading system does not recognize classes specified by xtype so we need to define the dependency manually

xtype - gives our new class its own xtype, allowing us to easily create it in a configuration object (just like we did with searchfield above)

Eg) items: [ { xtype: 'searchbar', docked: 'top' }

How we create a model

Note:- To create a model we have to extend ‘Ext.data.Model’Fields is a config of model which replicate the columns in a table.

Associations Models can be linked together with the Associations

API. Most applications deal with many different models, and the models are almost always related. A blog authoring application might have models for User, Post, and Comment. Each user creates posts and each post receives comments. We can express those relationships like so:

Each of the hasMany associations we created above adds a new function to the Model.

We declared that each User model hasMany Posts, which added the user.posts() function we used in the snippet above.

Calling user.posts() returns a Store configured with the Post model.

In turn, the Post model gets a comments() function because of the hasMany Comments association we set up.

Validations Models have rich support for validating their data. To demonstrate this we're going to

build upon the example we created that illustrated associations. First, let's add some validations to the User model:

presence simply ensures that the field has a value. Zero counts as a valid value but empty strings do not.

length ensures that a string is between a minimum and maximum length. Both constraints are optional.

format ensures that a string matches a regular expression format. In the example above we ensure that the age field is four numbers followed by at least one letter.

inclusion ensures that a value is within a specific set of values (for example, ensuring gender is either male or female).

exclusion ensures that a value is not one of the specific set of values (for example, blacklisting usernames like 'admin').

Models are typically used with a Store, which is basically a collection of model instances.

Stores can also load data inline. Internally, Store converts each of the objects we pass in as data into Model instances:

Sorting and Grouping Stores are able to perform sorting, filtering, and grouping

locally, as well as to support remote sorting, filtering, and grouping:

Using Proxies Proxies are used by stores to handle the loading and

saving of model data. There are two types of proxy: client and server.

Examples of client proxies include Memory for storing data in the browser's memory and Local Storage which uses the HTML 5 local storage feature when available.

Server proxies handle the marshaling of data to some remote server and exampl

Proxies can be defined directly on a model, like so:esinclude Ajax, JsonP, and Rest.

Summary We have learnt basics of sencha touch 2.

Setting up environment.

Making builds.

For more reference visit http://docs.sencha.com/touch/2-0/#!/guide