(For more resources related to this topic, see here.)

The Hello World application

In the previous sections, we saw how to set up environments for development of Sencha Touch. Now let's start with the Hello World application.

First of all, create a new folder in your web server and name it sencha-touch-start. Create a subfolder lib inside this folder. In this folder, we will store our Sencha Touch resources. Create two more subfolders inside the lib folder and name them js and css respectively. Copy the sencha-touch-all.js file from the SDK, which we had downloaded, to the lib/js folder. Copy the sencha-touch.css file from SDK to the lib/css folder. Now, create a new file in the sencha-touch-start folder, name it index.html, and add the following code snippet to it:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src = "lib/js/sencha-touch-all.js" type="text/
javascript"></script>
<link href="lib/css/sencha-touch.css" rel="stylesheet"
type="text/css" />
</head>
<body></body>
</html>

Now create a new file in the sencha-touch-start folder, name it app.js, and add the following code snippet to it:

Ext.application({
name: 'Hello World',
launch: function () {
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Welcome to Sencha Touch'
});
Ext.Viewport.add(panel);
}
});

Add a link to the app.js file in the index.html page; we created the following link to sencha-touch-all.js and sencha-touch.css:

<script src = "app.js" type="text/javascript"></script>

Here in the code, Ext.application({..}) creates an instance of the Ext.Application class and initializes our application. The name property defines the name of our application. The launch property defines what an application should do when it starts. This property should always be set to a function inside which we will add our code to initialize the application. Here in this function, we are creating a panel with Ext.create and adding it to Ext.Viewport. Ext. Viewport is automatically created and initialized by the Sencha Touch framework. This is like a base container that holds other components of the application.

At this point, your application folder structure should look like this:

building-hello-world-application-img-0

Now run the application in the browser and you should see the following screen:

building-hello-world-application-img-1

If your application does not work, please check your web server. It should be turned on, and the steps mentioned earlier should be repeated.

Now we will go through some of the most important features and configurations of Sencha Touch. These are required to build real-time Sencha Touch applications.

Introduction to layouts

Layouts give a developer a number of options to arrange components inside the application. Sencha Touch offers the following four basic layouts:

fit
hbox
vbox
card

hbox and vbox layouts arrange items horizontally and vertically, respectively. Let's modify our previous example by adding hbox and vbox layouts to it. Modify the code in the launch function of app.js as follows:

var panel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'hbox',
items: [{
xtype: 'panel',
html: 'BOX1',
flex: 1,
style: {
'background-color': 'blue'
}
},{
xtype: 'panel',
html: 'BOX2',
flex: 1,
style: {
'background-color': 'red'
}
},{
xtype: 'panel',
html: 'BOX3',
flex: 1,
style: {

'background-color': 'green'
}
}]
});
Ext.Viewport.add(panel);

In the preceding code snippet, we specified the layout for a panel by setting the layout: 'hbox' property, and added three items to the panel. Another important configuration to note here is flex. The flex configuration is unique to the hbox and vbox layouts. It controls how much space the component will take up, proportionally, in the overall layout. Here, we have specified flex : 1 to all the child containers; that means the height of the main container will be divided equally in a 1:1:1 ratio among all the three containers. For example, if the height of the main container is 150 px, the height of each child container would be 50 px. Here, the height of the main container would be dependent on the browser width. So, it will automatically adjust itself. This is how Sencha Touch adaptive layout works; we will see this in detail in later sections. If you run the preceding code example in your browser, you should see the following screen:

building-hello-world-application-img-2

Also, we can change the layout to vbox by setting layout: 'vbox', and you should see the following screen:

building-hello-world-application-img-3

When we specify a fit layout, a single item will automatically expand to cover the whole space of the container. If we add more than one item and specify only the fit layout, only the first item would be visible at a time. The card layout arranges items in a stack of cards and only one item will be visible at a time, but we can switch between items using the setActiveItem function. We will see this in detail in a later section.

Panel – a basic container

We have already mentioned the word "panel" in previous examples. It's a basic container component of the Sencha Touch framework. It's basically used to hold items and arrange them in a proper layout by adding the layout configuration. Besides this, it is also used as overlays. Overlays are containers that float over your application. Overlay containers can be positioned relative to some other components. Create another folder in your web server, name it panel- demo, and copy all the files and folders from the sencha-touch-start folder of the previous example. Modify the title in the index.html file.

<title>Panel Demo</title>

Modify app.js as follows:

Ext.application({
name: 'PanelDemo',
launch: function () {
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
items: [{
xtype: 'button',
text: 'Show Overlay',
listeners: {
tap: function(button){
var overlay = Ext.create('Ext.Panel', {
height: 100,
width: 300,
html: 'Panel as
Overlay'
});
overlay.showBy(button);
}
}
}]
});
Ext.Viewport.add(panel);
}
});

In the preceding code snippet, we have added button as the item in the panel and added listeners for the button. We are binding a tap event to a function for the button. On the tap of the button, we are creating another panel as an overlay and showing it using overlay. showBy(button).

Summary

This article thus provided us with details on building a Hello World application, which gave you further introduction to the most used components and features of Sencha Touch in real-time applications.