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), card, fit, hbox and vbox.

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.

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.

A blogger, speaker, author, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He has over 8 years of experience in developing rich mobile applications in Android, HTML5, Xamarin and PhoneGap.