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').
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 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.