Ext JS Component:

An Ext JS application UI is made up of one or more widgets called Components. Component is a group of DOM elements with complex functionality. All the Ext JS components inherit from Ext.Component class. ExtJS provides different types of components out of the box with complex functionalities, which you can use in your application such as Viewport, panel, container, grid, textfield, combobox, numberfield etc.

Ext JS UI components are derived from the Ext.Component class, which in-turn is derived from the Ext.Base class.

The following example demonstrates creating a simple component.

Ext.onReady(function () {

    Ext.create('Ext.Component', {
        id:'myComponent',
        renderTo: Ext.getBody(),
        html:'Hello World!'
    });

});

Try it on https://fiddle.sencha.com/#fiddle/s7t

In the above example, we have created a simple component using Ext.create() method. It will be rendered to the document body and will display a simple string 'Hello World!'.

All the components in Ext JS are registered with Ext.ComponentManager class on creation, so that it can be accessed by id using Ext.getCmp() method. The above component can be accessed using Ext.getCmp('myComponent').

Component Life Cycle:

Each component in Ext JS passes through following three stages:

Stage Description
Initialization Registering the component with Ext.ComponentManager and deciding if a component will be rendered.
Rendering Creating the DOM for the component and adding it to the DOM hierarchy with the events, CSS, etc..
Destruction Removing the events, the DOM object and unregistering the component from the Ext.ComponentManager

Ext JS 6 UI Components:

Ext JS 6 contains following UI components out-of the box.

Component Name Class Name
ComboBox Ext.form.field.ComboBox
Radio Button Ext.form.field.Radio
Checkbox Ext.form.field.Checkbox
TextField Ext.form.field.Text
Label Ext.form.Label
Button Ext.button.Button
DateField Ext.form.field.Date
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.CartesianChart
Html Editor Ext.form.field.HtmlEditor

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


Visit Sencha documentation to know how each components look like and work.