---

• Next »
• « Previous

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	xtype
ComboBox	Ext.form.field.ComboBox	combobox or combo
Radio Button	Ext.form.field.Radio	radio or radiofield
Checkbox	Ext.form.field.Checkbox	checkbox or checkboxfield
TextField	Ext.form.field.Text	textfield
Label	Ext.form.Label	label
Button	Ext.button.Button	button
DateField	Ext.form.field.Date	datefield
File Upload	Ext.form.field.File	filefield, fileuploadfield
Hidden Field	Ext.form.field.Hidden	hidden
Number Field	Ext.form.field.Number	numberfield
Spinner	Ext.form.field.Spinner	spinnerfield
Text Area	Ext.form.field.TextArea	textarea
Time Field	Ext.form.field.Time	timefield
Trigger	Ext.form.field.Trigger	triggerfield, trigger
Chart	Ext.chart.CartesianChart	chart
Html Editor	Ext.form.field.HtmlEditor	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.

---

---

• Next »
• « Previous