Ext JS 4 Components:

An Ext JS 4 application's UI is made up of one or more widgets called Components. Component is a group of DOM elements with complex functionality. All the ExtJS 4 components inherit from Ext.Component class.


xtype: Every Component has a symbolic name called 'xtype'. For example Ext.panel.Panel has xtype : 'panel'.


Following are some of the important out of the Box UI components:

Component Name Class Name
TextField Ext.form.field.Text
Label Ext.form.Label
Button Ext.button.Button
DateField Ext.form.field.Date
ComboBox Ext.form.field.ComboBox
Radio Button Ext.form.field.Radio
Checkbox Ext.form.field.Checkbox
File Upload Ext.form.field.File
Hidden Field Ext.form.field.Hidden
Number Field Ext.form.field.Number
Spinner Ext.form.field.Spinner
Text Area Ext.form.field.TextArea
Time Field Ext.form.field.Time
Trigger Ext.form.field.Trigger
Chart Ext.chart.Chart
Html Editor Ext.form.field.HtmlEditor

Ext JS 4 Containers:

There are special types of components called containers that can contain other components. Each container is derived from Ext.container.Container class.

Following are OOB containers in ExtJS 4:

Class Name Description
Ext.container.Viewport ViewPort is a specialized container representing the viewable application area (the browser viewport). Generally there is a single ViewPort in an Ext JS application which will define the application's main areas like north, west, south, east and center.
container Container is lightweight container which provides basic functionality of containing items, namely adding, inserting and removing items. So use this container when you just want to add other components and arrange them.
Ext.panel.Panel Panel is a special type of container that has specific functionality and components. Each panel has header, tool, body, toolbar components. So use Panel when you want specific user interface with header, toolbar and body part. Do not use it if you do not want these features in panel, use container instead.
Ext.form.Panel Ext.form.Panel provides standard containers for form. Use it when you want standard application form kind of user interface.
Ext.form.FieldContainer FieldContainer implements labelable mixins so that it can be rendered with label and error message around every sub-item component. You can use fieldcontainer in the form to arrange inner fields.
Ext.form.FieldSet Fieldset is a container for group of fields in a Ext.form.Panel.
Ext.grid.Panel Grid displays large amount of tabular data with sorting, filtering and other functionality.
Ext.container.ButtonGroup ButtonGroup provides a container for arranging a group of related Buttons in a tabular manner.
Ext.tab.Panel Ext.tab.Panel is a basic tab container. Use it when you want tab or wizard in your user interface.
Ext.tree.Panel TreePanel provides tree-structured UI representation of tree-structured data.
Ext.menu.Menu Menu is a container to which you can add Menu Items.
Ext.toolbar.Toolbar Toolbar is a container for toolbar buttons, text, fill, item etc.

Visit Sencha Documentation for more detailed information on Ext JS 4 components.