Hello World App Using Sencha Touch 2

Introduction

The previous article was an Introduction to the Sencha Touch. In this article we will get directly to work on Sencha Touch apps. In this article we will simply create a Hello World application. So for getting started with developing a Sencha Touch app you need to download the Sencha Touch framework from here. Once you have downloaded the framework from Sencha's official website we can start developing our first application.

The following procedure describes how to develop an app with Sencha Touch.

Other articles in this series.

1. Hello World App using Sencha Touch 2
2. Sample form application using Sencha Touch 2
3. Dealing with containers in Sencha Touch 2
4. Working with DataBound Controls
5. Introduction to MVC in Sencha Touch 2

Extract Downloaded zip

Once you have downloaded the Sencha Touch framework, extract the zip file to any drive on your system. After extracting the zip you will see the framework files with some examples. From here we need only the library files and css files.

Using IDE

Open your Visual Studio and create one empty website application. Once you have created an empty website from Visual Studio you will get only the web.config file. Now add one HTML page to your solution by adding a new item dialog.

Add Sencha Library

Next, to work with Sencha Touch, you need to add a reference to the Sencha library that you extracted in the preceding step. Here you need to add a sencha-touch-all-debug.js file to you solution. With the same, add the base.css file from the resources folder.

Add reference to Sencha library

To work with Sencha Touch you need to add the reference to Sencha library file, in other words sencha-touch-all-debug.js that was added in the previous step. Add the reference to the library file on your HTML page as in the following.

<link href="base.css" rel="stylesheet" type="text/css" />
<script src="sencha-touch-all-debug.js" type="text/javascript"></script>

Entry point

As a developer we all know every program has an entry point. Sencha also has an entry point. Add one more JavaScript file to your solution with the name app.js and write the code as in the following.

launch: function () {
        var panel = Ext.create('Ext.Panel', {
            id: 'helloworldpanel', height: '100%', width: '100%', html: 'Hello World! </br> Develope applications for Android, iPhone using sencha touch'
        });
        Ext.Viewport.add(panel);
    }
});

In the preceding snippet you can see how Sencha Touch apps start. In the preceding snippet we have started with Ext. application that denotes the application begins. Here in Sencha now on word we will follow Ext. only here everything start with Ext. Below ext. Application we have a launch function that is the main entry point for our Sencha application. Every Sencha application starts here in the launch function. Next we have created on a panel a container control using Ext. create followed by class name i.e. Ext. Panel and store it in one variable. Next we have added the created panel to the application's Viewport using the Ext.Viewport.add () function.

From the code above still you are not clear what I've written. Let me tell you it's part of the Sencha class system, we will see the class system in forthcoming articles. Here when I refer to Ext. Panel that means Sencha library has on class defined with Ext. Panel. Here we simply created one class instance. Next after creating the panel instance we have added it to the application's viewport.

Add reference to entry point

Next add the reference to app.js file on your HTML page and browse to the HTML page in your browser. To run this application browse to this page in any webkit browser if you are using IE then you must use IE 10.

Conclusion

In an easy manner we have created our first Sencha Touch application. In forthcoming articles we will see much more with some basic forms, controls and so on.