布局
许多类在使用配置对象创建（实例化）类时具有用于快捷方式的名称。快捷方式名称称为别名（如果类扩展 Ext.Component，则称为xtype）。别名/xtype 列在适用类的类名旁边，以便快速参考。
框架类或其成员可以指定为private或protected。否则，类/成员为public。Public、protected和private是访问描述符，用于传达如何以及何时使用类或类成员。
Public 类和类成员可供任何其他类或应用程序代码使用，并且可以依赖于主要产品版本中的稳定性和持久性。公共类和成员可以通过子类安全地进行扩展。
Protected 类成员是稳定的public成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地进行扩展。
Private 类和类成员在框架内部使用，不打算由应用程序开发人员使用。私有类和成员可能会随时在不通知的情况下从框架中更改或省略，并且不应依赖于应用程序逻辑。
static标签。*请参见下面的静态。下面是一个示例类成员，我们可以对其进行剖析以显示类成员的语法（在这种情况下，从 Ext.button.Button 类中查看的 lookupComponent 方法）。
让我们看看成员行的每一部分
lookupComponent）( item )）Ext.Component）。对于不返回 undefined 以外任何内容的方法，可以省略此项，或者可能显示由正斜杠 / 分隔的多个可能值，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，方法可能返回 Component，如果失败则返回 false，将显示为 Ext.Component/Boolean）。PROTECTED - 请参见下面的标志部分）Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员从祖先或混合类继承，则显示为灰色。查看源）item : Object）进行列出。undefined 以外的值，则“返回”部分将记录返回的类或对象类型以及描述（在此示例中为 Ext.Component）自 3.4.0 起可用 - 示例中未显示）默认为：false）API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();false，则不会触发- 表示框架类
- 单例框架类。*有关更多信息，请参见单例标志
- 组件类型框架类（Ext JS 框架内的任何扩展 Ext.Component 的类）
- 表示类、成员或指南在当前查看的版本中是新的
- 表示类型为 config 的类成员
- 表示类型为 property 的类成员
- 表示类型为 method 的类成员
- 表示类型为 event 的类成员
- 表示类型为 theme variable 的类成员
- 表示类型为 theme mixin 的类成员
- 表示类、成员或指南在当前查看的版本中是新的
在 API 文档页面上类名称正下方是一行按钮，对应于当前类拥有的成员类型。每个按钮按类型显示成员数（此计数在应用筛选器时更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含所有该类型的成员，以便快速导航。
与类配置选项相关的 getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，它们与之一起工作的配置下方。Getter 和 setter 方法文档将位于配置行中，以便于参考。
您的页面历史记录保存在本地存储中，并显示在顶部标题栏正下方（使用可用空间）。默认情况下，仅显示与您当前正在查看的产品/版本匹配的搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将显示历史记录栏中所有产品/版本的所有近期页面。
在历史记录配置菜单中，您还将看到最近访问的页面列表。结果按“当前产品/版本”和“全部”单选按钮进行筛选。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择了“全部”，则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也将以工具提示的形式显示产品/版本。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上，还有一个筛选器输入字段，它使用筛选器字符串筛选成员行。除了按字符串筛选外，您还可以按访问级别、继承和只读筛选类成员。这是使用页面顶部的复选框完成的。
API 类导航树底部的复选框筛选类列表以包括或排除私有类。
单击一个空的搜索字段将显示您最近的 10 次搜索，以便快速导航。
每个 API 文档页面（除了 Javascript 原始页面）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button 类具有备用类名 Ext.Button）。通常为向后兼容性维护备用类名。默认情况下，可运行的示例（Fiddles）在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换全部状态将在页面加载之间记住。
默认情况下，类成员在页面上折叠。您可以使用成员行左侧的箭头图标或使用右上角的全部展开/折叠切换按钮来展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小尺寸优化视图。桌面和“移动”视图之间的主要区别是
可以通过单击 API 文档页面顶部的类名来查看类源。可以通过单击成员行右侧的“查看源”链接来查看类成员的源。
在 Architect 中，布局控制应用程序中组件的大小和位置。在每个容器上配置布局可让你管理该容器的子项如何呈现。顶级（父级）容器的布局确定可对其子组件设置的大小和位置配置选项。要设置容器的布局，请使用容器的弹出配置按钮（画布中显示为组件右侧的齿轮形按钮）或配置中的组件的layout属性。
Ext JS 提供了许多基本容器布局，你可以使用 Architect 选择和配置它们。现代工具包支持适合移动 UI 设计的经典布局子集。一些布局支持特定、常用的演示模型（如手风琴和卡片），而另一些布局提供更通用的模型（如 HBox 和 VBox，它们可以水平或垂直排列子组件），可用于各种应用程序。
下表总结了 Ext JS 支持的布局选项
| 布局 | 描述 | 经典 | 现代 |
|---|---|---|---|
| 自动/默认 | 按顺序呈现子组件的默认布局 | Ext.layout.container.Auto | Ext.layout.Default |
| 绝对 | 使用相对于容器的显式 x/y 位置排列组件 | Ext.layout.container.Absolute | 无类似项 |
| 手风琴 | 以垂直堆栈方式排列面板组件，一次仅展开一个面板 | Ext.layout.container.Accordion | 无类似项 |
| 锚 | 相对于容器的侧面排列组件 | Ext.layout.container.Anchor | 无类似项 |
| 边框 | 按区域排列面板组件 | Ext.layout.container.Border | 无类似项 |
| 卡片 | 排列子组件，以便一次只能看到一个，填充组件的整个区域 | Ext.layout.container.Card | Ext.layout.Card |
| 列 | 以多列布局排列组件 | Ext.layout.container.Column | 无类似项 |
| 适合 | 展开单个子组件以填充可用空间 | Ext.layout.container.Fit | Ext.layout.Fit |
| 表格 | 在 HTML 表格中排列组件 | Ext.layout.container.Table | 无类似项 |
| HBox | 水平排列子组件。使用容器的stretch对齐方式使子组件填充可用的垂直空间；使用flex属性控制每个组件填充的水平空间比例 |
Ext.layout.container.HBox | Ext.layout.HBox |
| VBox | 垂直排列子组件。使用容器的stretch对齐方式使子组件填充可用的水平空间；使用flex属性控制每个组件填充的垂直空间比例 |
Ext.layout.container.VBox | Ext.layout.VBox |
为了帮助你入门，本指南的末尾包含三个示例，说明如何使用布局。
你可以使用Ext JS 布局浏览器更全面地了解各种布局的工作原理。尽管布局浏览器是为 Ext JS 编写的，但这些信息也适用于现代工具包支持的布局子集。本指南末尾的示例使用 Ext JS 框架。
以下是你可以用来开始配置视图组件的基本 Ext JS 布局。
两个工具包都支持。
对于面板等通用容器，使用自动布局意味着子组件按顺序呈现。一些容器自动配置为使用除默认自动布局之外的布局。例如，TabPanel 默认为卡片布局，而 Toolbar 默认为 HBox 布局。
仅经典支持
使用相对于容器的显式 x/y 位置排列组件。这允许在容器内显式重新定位和调整组件的大小，从而提供精确的控制。即使其父容器调整了大小，绝对定位的组件也会保持固定。
Architect 在使用绝对布局的容器内显示一个网格。默认情况下，组件在重新定位时会捕捉到网格。单击容器的弹出配置按钮可以调整网格的大小或禁用网格。网格仅在设计视图中显示为布局指南。组件呈现时不可见。
仅经典支持
以垂直堆栈方式排列面板组件，一次仅展开一个面板。只有面板（包括其子类，例如 TabPanel）可以添加到使用手风琴布局的容器中。
仅经典支持
相对于容器的侧面排列组件。指定子组件的宽度和高度为容器的百分比，或指定相对于容器的右边缘和底边缘的偏移量。如果调整了容器的大小，则会保留相对百分比或偏移量。
仅经典支持
根据五个区域之一以多面板布局排列面板组件
使用 Border 布局的容器必须将子容器分配到 Center 区域。Center 区域会自动调整大小以适应可用空间。通过单击并拖动面板的右侧或底部边缘，在画布上调整 North、South、East 和 West 区域的大小。通过启用 collapsible 属性，可以使 Border 布局中的任何区域可折叠。呈现时，在调整容器大小时，子面板会自动调整大小。
受两个工具包支持
允许用户一次逐步浏览一系列组件，方法是安排子组件，以便一次只能看到一个组件，填满容器的整个区域。使用 setActiveItem 方法指定要显示的组件。此行为通常附加到 UI 导航元素，例如容器页脚中的“上一步”和“下一步”按钮。它通常用于创建向导；请参阅本指南后面的示例。
仅经典支持
以多列布局排列组件。可以将每列的宽度指定为百分比（列宽）或绝对像素宽度（宽度）。列高根据内容而异。如果应用程序数据需要查看超出容器高度的列内容，请启用 autoScroll。
两个工具包都支持。
展开单个子组件以填满可用空间。例如，使用此布局创建包含单个 TabPanel 的对话框。如果容器是面板组件类型，还可以添加并停靠其他子组件，例如工具栏，到面板的顶部、左侧、右侧或底部。
仅受经典支持
在 HTML 表格中排列组件。指定表格中的列数。Architect 通过指定子组件 rowspan 和 colspan 属性，支持创建复杂布局。
两个工具包都支持。
水平排列子组件。将容器的对齐方式设置为 stretch 会导致子组件填满可用的垂直空间。设置子组件的 flex 属性控制每个组件填满的水平空间的比例。
两个工具包都支持。
垂直排列子组件。将容器的对齐方式设置为 stretch 会导致子组件填满可用的水平空间。设置子组件的 flex 属性控制每个组件填满的垂直空间的比例。
当容器嵌套时，父容器的布局配置管理其包含的任何子组件的布局，包括其他容器。
布局不影响任何子容器的内容，只影响容器本身。这允许创建嵌套的复杂布局。
使用 HBox 和 VBox 布局，可以使用 flex 属性调整子组件的大小以适应容器中的可用空间。flex 属性是一个数值，表示将分配给组件的可用空间的比例。将属性设置为任何浮点数，包括整数和小数。
考虑一个包含三个子面板的组件，其中面板 1 和面板 3 的 flex 设置为 1，面板 2 的 flex 设置为 2。可用空间被分成四等份（flex 值的总和），面板 1 和面板 3 各得一份，而面板 2 得两份，如下所示
为某些组件设置绝对宽度或高度，并为其他组件设置 flex 值会导致从总可用空间中减去绝对大小，并将剩余空间分配给 flexed 组件。例如，如果容器的宽度为 400 像素，并且面板 1 的宽度设置为 200 像素，则带有 flex 属性集的面板将共享剩余的 200 像素。如果面板 2 的 flex 为 2，面板 3 的 flex 为 1，则面板 2 将获得三分之二的空间，面板 3 将获得三分之一的空间，如下所示
如果未为组件指定绝对大小或 flex 值，则框架会检查该大小是否在应用程序的 CSS 中定义。如果在 CSS 中未指定大小，则框架会将最小必要空间分配给该项。
如果将 stretch 指定为使用 HBox 或 VBox 布局的容器的对齐选项，则其子组件将自动拉伸以水平或垂直适应容器的大小。当使用 HBox 时，子组件会垂直拉伸。使用 VBox 时，子组件会水平拉伸。例如，当在使用 HBox 的面板上设置 stretch 时，每个子面板都会自动拉伸以填充可用垂直空间。stretchmax 选项的工作方式与 stretch 相同，但它将子组件拉伸到最高或最宽组件的大小，而不是容器的大小，如下所示。
如果组件使用 Card 布局，则其子项一次显示一个，使其成为创建向导的理想选择。此示例展示了如何使用 Card 布局创建三步注册向导。
基本方法是
setActiveItem 函数以显示相应的面板。首先通过工具箱或画布将 Window 容器添加到 Architect。Window 只能作为顶级组件添加；它不能作为现有组件的子项添加。单击 Window 的弹出配置按钮，然后从布局菜单中选择 card 以将 Card 布局应用于 Window。此外，通过在配置中将 title 属性设置为您选择的标题，或在画布中双击其标题并覆盖那里的 MyWindow 来命名向导。
接下来，将 Panel 容器拖到 Window 上；此子面板用于创建向导中的第一步。Card 布局中的面板按添加到容器的顺序进行编号，从项 0 开始。默认情况下，项 0 设置为活动项。要在 Architect 中更改活动项，请选择 Window 并将 activeItem 属性设置为要激活的面板。
为向导的第二步和第三步向 Window 添加两个面板。将它们拖到画布上 Window 的标题栏或拖到检查器视图节点中的 Window 上。
在添加子面板时，隐藏它们的标题栏。首先在检查器中选择每个子面板。然后，滚动配置到 Ext.panel.Panel 下的 title 属性，或在过滤器字段中键入 title。然后，选择标题属性旁边的字段中的文本（My Panel）并将其擦除，或单击 title 值字段右侧的 x。
向导需要导航按钮才能从一个步骤移动到下一个步骤。通过从工具箱向顶级 Window 添加 Toolbar 组件并通过在弹出配置菜单中选择 bottom 将其停靠在 Window 底部来添加它们。
然后，向 Toolbar 添加四个按钮，并将按钮命名为 Cancel、Previous、Next 和 Submit。在画布上双击第一个按钮标签并键入以对其进行命名，然后使用 tab 键移动到 Toolbar 中的下一个按钮，直到您命名每个按钮。
按钮需要做一些额外的工作，以便用户和开发人员都可以更方便地使用它们。首先，通过在 Cancel 和 Previous 按钮之间添加一个 Fill 组件，以及在 Next 和 Submit 按钮之间添加一个宽度为 20 的 Spacer 来对齐按钮。
然后，使用 Config，向下滚动到每个按钮的itemid属性（在Ext.AbstractComponent下），并将其设置为可以在导航处理程序中轻松引用的名称。例如，将itemid属性分别设置为cancelBtn、prevBtn、nextBtn和submitBtn。
现在为向导的每张卡片添加内容。由于向导需要收集用户输入，因此每张卡片应为表单面板，而不是面板。幸运的是，在 Architect 中，可以轻松地将一种类型的组件更改为另一种类型。要将面板更改为表单面板，请右键单击每个面板，选择“转换”，然后选择Ext.form.Panel。
对于此示例，我们为一系列马术诊所构建了一个注册向导，如下所示的三张卡片。默认情况下，卡片 0 是活动卡片。要向卡片 1 和卡片 2 添加表单字段，请选择窗口并将其activeItem属性设置为要处理的面板。
HBox 布局支持子组件的水平排列，而 VBox 则垂直排列子组件。这些通用布局提供了对组件定位的很多控制，而无需使用绝对定位。
此示例在多列中排列了几个相关的复选框以节省空间。从表单面板容器开始，然后为复选框向表单面板父级添加一个 FieldSet 容器。将 FieldSet 的布局设置为hbox。
接下来，为每个列向 FieldSet 添加一个容器组件。在检查器中选择每个容器，将flex设置为1，并将高度设置为容纳所有要添加的复选框。例如，60 像素可容纳三行复选框。
在“组件”选项卡中选择列容器更容易。当它们首次添加到 FieldSet 时，它们的高度默认为 2 像素，这使得它们在画布中难以选择——这是在检查器中选择组件的一个很好的理由。
最后，向每个列容器添加复选框，并为每个复选框设置boxLabel属性。要指定复选框周围的边距，请将列容器的布局从auto更改为vbox，然后为每个单独的复选框设置margin属性。
要创建需要浏览器窗口中整个内容区域的应用程序（即整个浏览器视口），请使用视口容器。视口通常使用边框布局根据北、南、东、西或中心区域排列子面板的集合。使用边框布局时，必须将面板子组件分配到中心区域，该区域会自动调整大小以适应可用空间。让我们逐步完成一个采用此方法的示例：学生用来注册课程的查看器。通过向新的 Architect 项目添加视口来开始构建查看器。视口只能作为顶级组件添加；它不能作为现有组件的子级添加。通过单击视口弹出配置按钮并从布局菜单中选择边框来选择边框布局。接下来，将面板拖到视口中。因为这是当前布局中唯一的组件，所以它会自动分配到中心区域。此面板将显示已注册我们某个课程的人员的信息，因此将面板命名为学生信息。
通过选择视口并在工具箱中双击树面板来向视口添加树面板，将其作为视口的子级添加。或者，你可以在检查器中将树面板拖到视口中。Architect 会自动将树面板分配到西区域。学生将使用树来浏览他们可以参加的课程，因此将其命名为课程列表。
注意：可以更改子组件分配到的区域。为此，请在 Config 中设置其region属性。
下一步是配置课程列表树和学生信息面板以显示有关课程的内容。可以使用模板在学生信息面板中显示单个学生的数据。
Architect | 使用条款