02_组件（Components）

让我们从分析Ext JS内部的基本组件来开始学习Ext JS。

Ext.Viewport.add({    xtype: 'panel',    html: 'Hello World!'});

上面的代码似乎看起来很熟悉。让我们继续研究一下这具代码的代表意义。

你可以从我们的代码中看到，我们添加了一个对象到一个叫做Viewport的东西里（视窗，敬请期待后续说明）。这个被添加的对象包含了如下属性：

xtype

html

‘xtype’属性的特别之处在于它表明了我们要创建的组件类型。除了panel，我们还可以为xtype属性赋很多值，比如’button’或者’grid’。但用panel作为开始是不错的选择。

 

我们创建的组件的类型决定了我们可以在这个对象里可以配置的其它属性。这些属性被称为”configproperties”(或者简写为”configs”)，它们被用来配置我们创建的组件。这些属性相当于我们要应用到HTML元素上的属性。

配置（Configs）

让我们讨论一下组件的配置！

每个组件都有一些可配置的配置属性。如同我们在上面示例中看到的，这些属性包括“title”，“hidden”,”modal”等等。通常，最普遍使用的配置会配置有最常用的默认值。然而，所有你可看见的东西都可以以任意多种方式进行配置。

在我们的例子中，html配置项是相当直截了当的。html配置项的值会被添加到组件，作为该组件（这里是一个panel组件）的主要内容。

 

XTypes

xtype是一个简易方便的别名，用来代替全路径组件名称的引用。例如，“xtype:’panel’”代替’Ext.panel.Panel’。这让你可以用xtype快速创建并渲染组件，不需要记住（关键是用键盘敲出）组件的全名。

提示：你能在所有的组件文档页面找到xtype的值。这是panel说明文档的链接：http://docs.sencha.com/extjs/6.2.0/modern/Ext.Panel.html。你可以在紧挨组件名称的右面找到xtype的值。

你甚至可以创建具有自己xtype的自定义组件，我们稍后将会讲到。

 

Viewport（视窗）

你可能已经注意到了，我们将panel添加到了一个叫做Ext.Viewport的东西里。Ext.Viewport是一个具有特别功能的组件。它可以自动调整自己的大小来适应浏览器窗口的大小，对于添加到视窗里的组件，也能够很方便地管理它们的大小和位置。

下一步

既然我们已经讨论了Ext JS的基本要点，那么让我们向我们的panel里添加一个组件，以继续对Ext JS Containers的钻研。

 

深入研究

想要获取更多有关configs的信息，请查看我们的“类系统概览”章节：http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/classes.html。