The Sencha Touch UI provides mixture of interactive widgets that can be displayed on screen. Below image shows the class diagram of Sencha Touch container sub classes.

Ext.Container is the base class that may contain and manage other Components. It handles the basic behavior of containing items, namely adding, inserting and removing items. Child components can be added to Container, by specifying the layout configuration property. We can either specifying child items of a Container using items configuration property or dynamically adding Components to a Container. By default, Containers use the AutoContainerLayout scheme which only renders child components, appending them one after the other inside the Container. An example of these types of widgets is the Toolbar. Valid layout type values are, auto, (default), cardfithbox and vbox.

Introduction to Sencha Touch User Interface


Sencha provides a number of visual components out-of-the-box. Creating instances of these components can be done either by making calls to their constructors or declarative by "xtype". The xtype is a key used for specifying the component class to be constructed. I’ve organized the following table to help us grasp the groups of UI components.

Basic User Interface Components

[table tablesorter=”0″ class=”table table-bordered” style=”width: 50%;”]
xtype, UI Component Classes
button, Ext.Button
component, Ext.Component
panel, Ext.Panel
toolbar, Ext.Toolbar
spacer, Ext.Spacer
tabpanel, Ext.TabPanel

Sencha Touch Form Components

[table tablesorter=”0″ style=”width: 50%;” class=”table table-bordered”]
xtype,UI Form Component Classes

The scope of this tutorial includes the basic UI components and form components but not all of them. To determine the “xtype” to use for a particular class of component, refer the Sencha Touch API Documentation for that class.

Sencha Touch User Interface Design tutorials

1. Sencha Touch Button Example

2. Sencha Touch ToolBar example

3. TabPanel example

4. Basic Carousel Example

5. Sencha Touch Basic Form Control Example

6. Picker with Slots Example

7. Simple and Grouped List Example

8. Sheet And ActionSheet Example

9. Confirm, Alert and Prompt MessageBox in Sencha Touch

This article is about: Sencha Touch,


A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (, DZone MVB and founder of


Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.