Develop mobile applications using 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.

Requirements :

• Sencha Architect. You can download it from following link to get 30days trial version. Click here
• A web server running locally on your computer.
• A modern web browser; Chrome and Safari are recommended.

Sencha Architect Architecture :

Code for Sample Application :

Open up the Project directory. The directory structure looks like this:

Here's a description of each file and directory:

·         app - directory containing the Models, Views, Controllers and Stores for your app.

·         app.js - the main Javascript entry point for your app.

·         app.json - your app configuration file - used by the Builder to create a minified version of your app.

·         index.html - The HTML file for your app.

·         packager.json - The configuration file used by the Packager to create native versions of your app for iOS and Android app stores.

·         resources - directory containing the CSS and Images for your app

Open app.js, the main entry point for your app, in your editor

  

Example:

Step 1: Open Sencha Architect  & select create NewProject. Give project name and save it in desired location.

Step 2: Select Target orientation iPhone(320*480) or iPad(768*1024).

Step 3: Drag container from Toolbox & Drop it in Design mode. Here Now View is getting Created.

Step 4: Give the required properties for that view from the property configurations like userClassName, scrollable(true),border, docked, height, width etc.

Step 5: drag & drop button, label from toolbox to your view and name it.

Step6 : Select button and add handler through property configuration window & add the following code for that handler.

Ext.getCmp('lblDisplay').setHtml('Hello!!! This is first Sencha Touch Application');

Step 7: Go to the target folder & Run app.html file in browser(Chrome &Safari recommended).

Output :

References:

                        Sencha official website

                        Sencha Touch Documentation

Conclusion:    The Sencha Touch Architect provides good environment for developing mobile application for Android as well as iPhone & iPad also.