布局
许多类在使用配置对象创建（实例化）类时都有快捷名称。快捷名称被称为 alias（如果类扩展自 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）。如果成员源自当前类，则源类将显示为蓝色链接；如果成员从祖先类或混入类继承，则显示为灰色。view source）item : Object）。undefined 之外的值，则“返回值”部分将注明返回的类或对象类型以及描述（示例中的 Ext.Component）Available since 3.4.0 - 未在示例中显示），紧跟在成员描述之后Defaults to: false）API 文档使用许多标志来进一步沟通类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();false，则标记为可阻止的事件将不会触发- 表示框架类
- Singleton 框架类。*有关更多信息，请参阅 singleton 标志
- 组件类型框架类（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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
理解和使用 GXT 布局。
浏览器和 Web 标准（如 HTML 和 CSS）旨在简化网页构建。网页是彼此之间具有链接的文档，旨在从上到下查看，并在侧面具有全页滚动条。这种面向文档的方法非常适合或多或少按顺序消费的内容。这与应用程序不同，应用程序以各种非线性方式查看。
要真正开始思考为什么布局是必要的，让我们看一下 HTML 和 CSS 为我们提供了哪些功能。有些人使用像 GXT 这样的库来尽量避免这些细节，但对基本原理的理解可能会派上用场。
默认情况下，HTML 元素可以通过少数几种方式自动布局。几乎所有元素都可以被认为是块级元素或内联元素。块级元素的布局方式类似于文本文档中的段落，一个接一个地排列在下面。<p>、<div> 和 <table> 元素是块级元素的三个示例。内联元素就像段落中的单词 - 它们在同一行中一个接一个地排列，直到没有足够的空间显示下一个单词，然后它们换行到下一行。<a>、<img> 和 <span> 元素是内联元素的三个示例。
块级元素可能具有内边距、边框和外边距，而内联元素不一定对其所需的效果做出响应。它们也可以相对于它们通常所属的位置相对定位，或者根据父容器绝对定位。块级元素不需要始终在新行上开始 - float 属性允许它们一个接一个地定位，直到没有空间为止，很像内联元素。将 float 属性应用于块级元素是一种允许在需要在同一行中显示的所有元素上使用定位和内边距/边框/外边距属性的方法。
我们可以从这些基本功能中看出，HTML 元素实际上是为构建文档而设计的，这些文档根据本地化（内联或使用 float）水平流动，从上到下（整行或块级元素换行到下一行）。这些功能用于内容丰富的页面时，不可避免地会导致长页面，需要全浏览器滚动条才能查看呈现给用户的所有内容。
将此与您使用的其他应用程序进行比较 - 没有原生应用程序应该有全应用程序滚动条。即使 Web 浏览器也具有用户界面元素，如标题栏或选项卡条或书签栏，这些元素保持固定并且不会“滚动出屏幕”。即使文字处理器也有保持可见的菜单。我们需要一种构建内容的方法，该内容可以以有意义的方式占用空间，以呈现应用程序而不是单个大型可滚动内容块。
展望未来，我们将以两种不同的方式引用这些概念 - 应用程序适合可用空间，而文档堆叠内容，如果内容不适合，则使用滚动条。我们可以通过查看嵌套元素如何影响彼此的大小来描述这些布局的结构。文档布局是自下而上的，子元素调整其父元素的大小。相反，应用程序布局是自上而下的 - 从根窗口开始，根据开发人员的说明为每个子元素分配空间。标准 HTML 和 CSS 非常适合构建文档布局，但要构建应用程序，我们需要一些专门手写的 CSS 或一些代码来测量、调整大小和定位我们的内容以适应可用空间。
在 GXT 中，包含其他 Widget 的 Widget 称为 Containers。第一种主要类型的 Containers 是 SimpleContainters。SimpleContainers 接受一个子元素并可以调整该子元素的大小。可以容纳多个子元素的 Containers 称为 InsertResizeContainers。可以将其他 Widget 插入到 InsertResizeContainer 中，并且这些子元素将根据容器的大小调整大小。
ResizeContainer 的基本约定是它可以调整其子元素的大小。但是，只有在 ResizeContainer 本身被赋予大小的情况下，它才能进行此大小调整。否则，它只是猜测可用空间。ResizeContainer 没有关于大小调整的具体细节 - 它只有足够的连接来确保所有子类都能够获得他们需要的信息并正确调整其子元素的大小。
这些通常构建为容纳一个子元素并将该子元素的大小调整为可用空间。它们可能会自己使用一些空间来提供其他功能。SimpleContainer 可以配置为不调整其子元素的大小，方法是将 resize 设置为 false。SimpleContainers 的一些示例包括 ContentPanel、FieldSet、FieldLabel、Viewport 和 BorderLayoutContainer。
这些是人们在谈论布局、定位和大小调整时最常想到的容器。这些容器都可以容纳多个项目，并且具有调整其大小和定位它们的功能。每个 InsertResizeContainer 将根据其自身的特定规则调整其子元素的大小。正如我们在 ResizeContainer 中讨论的那样，如果未给出大小，这些容器通常无法正确完成工作，因为它们不知道它们有多少可用空间可以分配给每个子元素。
这些是专门的容器，擅长容纳已经调整大小的元素，并对其进行间距和堆叠。这些主要用于菜单/工具/按钮栏，并且不会在本文中进一步讨论。
这些容器仅允许将子元素附加到它们，但根本不调整其大小或定位它们。它们可用的唯一大小调整和定位是 HTML 和 CSS 通常会做的。
最后还有 HtmlLayoutContainer，它实际上不是这些中的任何一个。这是一个特殊的容器，它允许您从 HTML 模板开始，并根据 CSS 选择器向其中添加子元素。用于模板的 HTML 完全负责定位所有子元素。
每个容器都有其自身的特定用途，这些用途应在该容器的文档中描述。在查看任何容器及其布局功能时，请记住它如何调整其子元素的大小和定位，以及它使用什么布局数据来更具体。
许多组件或容器需要大小才能正确完成其工作 - Grid、Tree、HorizontalLayoutContainer 和 BorderLayoutContainer 就是几个这样的示例。不一定总是直接在这些组件上调用 component.setPixelSize 或 component.setSize，但如果未以这种方式显式给出大小，则必须由其父元素调整大小才能正常工作。某些组件（如 Grid）如果未给出显式大小，则可能在很大程度上正常工作，但这并非受支持的用例。
并非所有容器都会调整其子元素的大小 - 如果父元素不打算调整需要大小的子元素的大小，则必须显式调整其大小才能正确渲染。
某些容器需要其他信息才能正确定位和调整其子元素的大小。它们通常从 LayoutData 实例获得该方向，LayoutData 实例与子元素一起通过 add 或 insert 方法传递。如果对象未正确渲染或调整大小，请确保在将对象及其父元素添加到其父元素时，已为它们提供了有意义且正确的布局数据。
在许多情况下，这些布局数据类型不仅提供可以启用或禁用的功能，而且还提供指定正在添加的子元素大小的能力。例如，VerticalLayoutData 和 HorizontalLayoutData 接受三个值范围：-1 表示不给子元素大小，但子元素将自动（即自下而上）消耗其所需的大小。大于 1 表示要使用的特定像素大小，而 0.0-1.0 表示应为此子元素分配剩余空间的百分比值。
在构建应用程序时，有时制作文档是一件好事。再次考虑 Web 浏览器或文字处理器 - 这些是应用程序，但它们包含文档，并允许您与它们交互。同样，Web 应用程序在需要绘制某种文档时可能会使用滚动条和自下而上的大小调整，但该文档几乎总是调整大小以适应应用程序中的可用空间，因此它应该在达到一定大小后拥有自己的滚动条，而不是仅仅增长。
表单、网格和树是类似文档行为的三个很好的示例，但略有不同 - 虽然表单和树在分配大小或不分配大小的情况下都能很好地工作，但网格中的滚动条不允许持续增长是没有意义的。网格需要知道它有多少空间来构建标题、可选的页脚、滚动条本身的空间，然后是其余的滚动内容。
即使在这些情况下，通常也最好调整容器的大小以适应应用程序，尽管不会调整子元素的大小。然后，这些子元素将消耗它们需要的空间，并且要么留下空白空间，要么将需要滚动条。
仅计算 GXT 本身中具体的、非匿名的 Container 子类，就有几十个，因此一篇文章无法深入探讨所有这些子类。相反，可以将其视为常用容器及其提供的基本功能的列表。
自动调整自身大小以适应可用的浏览器空间。由于它是一个 SimpleContainer，它会将其子组件调整到自身可用的空间大小。直接将其添加到 RootPanel，然后将应用程序的其余部分添加到其中，以使其全部正确地调整到浏览器大小。
支持一个主区域和四个外部边框区域。允许用户交互来调整这些外部区域的大小。对于构建应用程序的框架非常有用，可以包含不同的侧边和顶部/底部面板。必须为侧边区域指定大小（宽度或高度，取决于区域），中心区域将占用剩余空间。使用 BorderLayoutData 可以利用其他功能。
简单的面板，支持单个子组件。具有标题（能够包含文本和简单的工具小部件）、主区域周围的边框和底部的按钮栏。由于这是一个 SimpleContainer，因此添加的子组件将调整大小以适应标题、边框和工具栏未使用的剩余空间。
基本的 InsertContainer，允许所有子组件按照正常的 HTML/CSS 规则进行绘制。适用于表单和其他类似文档的内容。
这些容器根据给定的尺寸调整其子组件的大小。必须为容器指定一个尺寸，并将该尺寸与给定的 HorizontalLayoutData 或 VerticalLayoutData 结合使用，为每个子组件分配空间。尺寸为 -1.0 表示不调整子组件的大小（使用其自然大小），尺寸大于 1.0 被解释为用于调整子组件大小的像素值，尺寸介于 0.0 和 1.0 之间被解释为剩余空间的百分比。这些容器必须被设定尺寸。当为这些容器提供尺寸不是 -1 的布局数据时，它们也会调整其子组件的大小。
此容器的操作介于 VerticalLayoutContainer 和 FlowLayoutContainer 之间。它利用 CSS 的 float:left 属性来定位子组件，但依赖于给定的宽度来决定其子组件的宽度。CssFloatLayoutContainer 不分配高度值，而是增长（自底向上的结构）以使用所需的空间。宽度将根据可用空间分配，因此宽度为 0.25 的四个项目将共享宽度，而宽度为 1.0 的四个项目将各自占用新的一行，使用所有可用宽度。此行为适用于表单和其他应缩放到可用宽度的类似文档的内容。
每个容器都有其特定的用途，但重要的是要注意，当嵌套面板时，会在 GXT 中构建布局链。如果将非 GXT 小部件或元素添加到链中，例如使用 <div/> 元素，则可能会破坏 GXT 布局行为。换句话说，子容器应该是 GXT 容器的后代，否则子组件的行为（如尺寸调整）可能无法按设计呈现。
GXT | 使用条款
