Ext JS 组件Component

前言：DOM元素 < 小部件(widgets) < 组件(Component)。

Ext JS Component

由一个或者多个小部件(widgets)组成的UI应用叫作组件(Component)，组件里有许多带有复杂功能的DOM元素。所有的Ext JS 组件都继承于Ext.Component类ExtJS提供了相当数量的具有复杂功能的不同类型的组件，像：Viewport, panel, container, grid, textfield, combobox, numberfield 等。继承关系：Ext.Base=>Ext.Component。下面的例子里面创建了一个简单的组件，可以在这里试一下：

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

效果：画面左上角有”Hello World!”的文字，而没有任何其他样式。
Ext JS中的所有组件都由Ext.ComponentManager类进行统一地注册、管理，因此可以通过使用Ext.getCmp(id)方法来获取组件。比如上面例子里就能通过Ext.getCmp(‘myComponent’)来访问。

组件的生命周期

每个组件都会经历以下的生命周期：

阶段	描述
初始化(Initialization)	使用Ext.ComponentManager注册组件，然后决定是否渲染组件。
渲染(Rendering)	为组件创建其所属的DOM，并将其添加到DOM树(DOM hierarchy)中，然后追加事件，CSS等。
销毁(Destruction)	删除组件的事件，其所属的DOM对象，并从Ext.ComponentManager取消注册。

Ext JS 6 UI 组件

如下，xtype是组件缩写(推荐使用)，效果图均来自官方代码示例，可以点击类名的链接，丧心病狂的水印，，，(╯‵□′)╯︵┻━┻：

组件名称	所属类	xtype	效果
ComboBox	Ext.form.field.ComboBox	combobox 或 combo
Radio Button	Ext.form.field.Radio	radio 或 radiofield
Checkbox	Ext.form.field.Checkbox	checkbox 或 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	从5.0版本开始不再推荐使用，兼容性原因保留。请使用 Ext.form.field.Text 的triggers配置代替。
Chart	Ext.chart.CartesianChart	chart	图表类组件。未提供案例。
Html Editor	Ext.form.field.HtmlEditor	htmleditor