Base class for all Ext components. All subclasses of Component may participate in the automated Ext component lifecycle of creation, rendering and destruction which is provided by the Container class. Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.
The Component base class has built-in support for basic hide/show and enable/disable and size control behavior.
All Components are registered with the Ext.ComponentManager on construction so that they can be referenced at any time via Ext.getCmp, passing the id.
All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component.
See the Creating new UI controls tutorial for details on how and to either extend or augment ExtJs base classes to create custom Components.
Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. This is the list of all valid xtypes:
xtype Class
------------- ------------------
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progress Ext.ProgressBar
slider Ext.slider.Single
spacer Ext.toolbar.Spacer
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window
Toolbar components
---------------------------------------
paging Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item
Form components
---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie
It should not usually be necessary to instantiate a Component because there are provided subclasses which implement specialized Component use cases which over most application needs. However it is possible to instantiate a base Component, and it will be renderable, or will particpate in layouts as the child item of a Container: 
Ext.create('Ext.Component', {
html: 'Hello world!',
width: 300,
height: 200,
padding: 20,
style: {
color: '#FFFFFF',
backgroundColor:'#000000'
},
renderTo: Ext.getBody()
});
The Component above creates its encapsulating div upon render, and use the configured HTML as content. More complex internal structure may be created using the renderTpl configuration, although to display database-derived mass data, it is recommended that an ExtJS data-backed Component such as a {Ext.view.DataView DataView}, or {Ext.grid.Panel GridPanel}, or TreePanel be used.
Config Options
CSS Class configs
The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'
Other Configs
The initial set of data to apply to the tpl to update the content area of the Component.
A configuration object or an instance of a Ext.ComponentLoader to load remote content for this Component.
A valid Ext.resizer.Resizer handles config string (defaults to 'all'). Only applies when resizable = true.
The class that is added to the content target when you set styleHtmlContent to true. Defaults to 'x-html'
True to automatically style the html inside the content target of this component (body for panels). Defaults to false.
Properties
Methods
@deprecated 4.0 Replaced by {link:#addCls} Adds a CSS class to the top level element representing this component.
Adds a cls to the uiCls array, which will also call addUIClsToElement and adds to all elements of this component.
Appends an event handler to this object.
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
Find a container above this component at any level by xtype or class
See also the up method.
Returns thq current animation if this object has any effects actively running or queued, else returns false.
Gets the Ext.ComponentLoader for this Component.
Hides this Component, setting it to invisible using the configured hideMode.
Appends an event handler to this object (shorthand for addListener.)
Removes listeners that were added by the mon method.
Sets the height of the component. This method fires the resize event.
This method allows you to show or hide a LoadMask on top of this component.
Sets the width of the component. This method fires the resize event.
Suspend the firing of all events. (see resumeEvents)
Removes an event handler (shorthand for removeListener.)
Update the content area of a component.
Events
Fires after a Component had been added to a Container.
Fires before the component is hidden when calling the hide method. Return false from an event handler to stop the hide.
Fires before the component is shown when calling the show method. Return false from an event handler to stop the show.
Fires before the state of the object is restored. Return false from an event handler to stop the restore.
Fires before the state of the object is saved to the configured state provider. Return false to stop the save.
Fires after the component is destroyed.
Fires after the component is hidden. Fires after the component is hidden when calling the hide method.
Fires after the component markup is rendered.
Fires after the component is shown when calling the show method.
Fires after the state of the object is saved to the configured state provider.
