Dealing With Containers in Sencha Touch 2

Before reading this article please go through the following articles.

Introduction

In the last article we developed a sample form application using Sencha Touch 2. In this article we will see the container available in Sencha Touch 2. As a developer you are all aware of containers.
What are containers?

We all know that containers are nothing but controls that can have child controls inside them. Containers are very useful when we need to arrange the child controls or make a group of various controls. Containers are the option for developers for that. For example a panel that is one of the container controls that can have child controls arranged inside it. In Sencha Touch we have various container controls; we will look at those controls one by one.

1. Component

A Component is the base control for all available controls in Sencha Touch. Every control you create in Sencha Touch 2 is nothing but a component. A Component has the ability to be rendered on the form, show or hide themselves and enable or disable themselves. You can create a component using xtype as "component".

2. Container

A Container is inherited from Component and has the all abilities that a Component has. A Container has one more extra feature that can nest other container controls inside them, like panels, tabpanels and so on. As we know, when we are developing a web app we need many containers, like panels and tabpanels. Container controls allow you to arrange the child controls inside them. You can create a container using xtype as "container". In Sencha Touch 2 all the lower level containers like panels, tabpanels and carousels are inherited from container only. In Sencha Touch 2 a container allows you to add or remove child components at runtime. A Container has the ability to specify the layout as well. We will talk about layouts further in this article.

3. Panels

Like other frameworks, Sencha Touch 2 also provides a basic container control, in other words Panel. In a Sencha Touch 2 app when you need to create overlapping controls then panels are the best way to do that. You can use the panels for arranging the page child controls also. Panels have the ability to provide the layouts. Take the following example that creates a main panel and inside it creates two side-by-side child panels.

var mainPanel = Ext.create("Ext.Panel",
{
id: 'mainpanle', height: '100%', width: '100%', layout:
{
type: 'hbox'
},
items: [{//items of formpanel
xtype: 'panel',
layout: 'vbox',
html: 'Panel One',
width:'30%',
style: 'background-color: #5E99CC;'
},
{
xtype: 'panel',
layout: 'vbox',
html: 'Panel Two',
width:'70%'
}
]
});
Ext.Viewport.add(mainPanel);
}

To arrange the panels, they have configurations called layout; the possible values are "fit", "hbox", "vbox". If your application is running on various sizes of devices then it is a best practice to make your containers with a fit layout because this layout will maintain child control sizes according to the device size. To create horizontal panels use a "hbox" layout and for vertical panels use a layout as "vbox".

4. Tabpanel

This is one more useful container control provided by Sencha Touch 2. When you have a large amount of child controls and there is not enough space then this control is useful. To create a tabpanel use xtype as "tabpanel" or create an instance of the tabpanel class using Ext.create("Ext.Tab.Panel"). Tabpanels are very easy for the user to switch from one screen to another screen on mobile devices so use tabpanel whenever you have requirements such as that. A Tabpanel has a default tabbar; it is updated whenever you add additional items in a tabpanel. The following code creates a tabpanel with two items; you can add more items.

Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});

5. Carousel

This is one is on of the interesting containers in Sencha Touch 2. If you are a Windows Phone 7 developer then you are familiar with the Panorama control. Carousel is like a Panorama in Windows Phone 7. When you need to add swiping of screens in mobile devices then you can use a Carousel control. The default layout for a Carousel is "card". Carousel contains cards inside it and using your finger you can swipe the card left or right in Sencha Touch 2 app. A Carousel can be create using the xtype "carousel". The following snippet will create a Carousel.

Ext.create('Ext.Carousel', {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
});