视图简介
许多类在使用配置对象创建（实例化）类时都有快捷名称。快捷名称被称为 别名（如果类扩展了 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，则标记为可阻止的事件将不会触发- 表示框架类
- 单例框架类。 *有关更多信息，请参阅单例标志
- 组件类型框架类（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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“view source”（查看源代码）链接来查看类成员的源代码。
Sencha Architect 使您可以快速组装应用程序用户界面功能，用于桌面或移动设备。您可以使用 Architect 视图功能组装 UI，而无需了解 Sencha 框架或这些视图的底层 JavaScript。
这使得 Architect 非常适合快速原型化应用程序的可见部分。这也意味着设计团队可以单独处理应用程序人机界面，而团队的其他成员则专注于应用程序的其他部分。开发人员可以专注于构建控制器以实现业务规则和应用程序逻辑，而数据架构师可以专注于使用模型和存储定义应用程序的数据端。
您可以将视图组件（例如容器、网格、表单和图表）拖到项目检查器中，在画布上查看它们，对其应用布局，并通过配置来配置其属性。您还可以添加自己的自定义 JavaScript。
每次构建项目时，Architect 都会为当前项目生成代码。您还可以开发自己的自定义视图组件，并将其导出以供其他项目和其他开发人员重用。
Architect 可以灵活地组装网页元素，轻松重用视图组件，并简化 UI 的维护。使用 Architect 布局 UI 组件时，您可以在工具箱中找到组件（例如 Window 或 Form Panel 容器），将其拖到检查器或画布，并从那里添加其他组件，作为顶层父组件或作为嵌套在父组件内的“子”组件。
通过向项目添加其他顶层容器，您可以将 UI 的不同部分布局为单独的实体。构建项目时，每个顶层容器都由一个类表示，该类的代码位于其自己的单独文件中。
当您将组件拖到项目中时，Architect 会阻止不兼容组件的嵌套。例如，Window 或 Viewport 组件无法拖放到 Container 中。从工具箱中拖动无法添加到画布中选定组件的组件会导致 Architect 显示一个图标，指示不兼容性。
让我们动手看看如何在 Architect 中使用视图构建 UI。以下部分将引导您完成构建示例基于 Ext JS 的桌面应用程序 Car Listings 的第一步，该应用程序在整个 Architect 文档中使用。
转到 Architect。确保它打开到基于 Ext JS 的桌面项目。然后按照这些说明操作。
在工具箱中，找到 Panel 容器。有几种方法可以做到这一点
Panel。将 Panel 拖到检查器中的 Views 节点。您也可以将其拖到画布中，这可以达到相同的效果。请注意，当您开始拖动 Panel 时，会出现一个图标，指示您还不能放下它，如下所示
当您将 Panel 拖到 Views 节点或画布上时，图标会更改以指示您可以在该位置放下它。工具箱中的每个组件都以这种方式工作，以帮助您了解哪些组件可以协同工作。
您可能需要在添加 UI 组件后删除它。以下是如何执行此操作：将第二个 Panel 拖到项目中。事实证明我们并不真正需要它，所以让我们删除它。通过右键单击检查器中的 Panel 以打开其上下文菜单并选择 删除 来执行此操作。您也可以在画布中执行相同的操作。您还可以使用 Mac 系统上的 ⌘Z 键盘快捷键或 Windows 和 Linux 中的 (Ctrl+z 键盘快捷键) 删除刚刚添加的组件。或者，您可以在检查器中选择组件后按 Shift+Delete。
构建或保存您的项目，并在之后定期保存；我们将在本指南的后面部分介绍它的作用。
在工具箱中找到 Grid Panel，并将其拖放到 Panel 容器上，无论是在检查器还是画布中。实现相同目的的另一种方法是在任一位置选择 Panel，然后在工具箱中双击 Grid Panel。
现在将另外两个 Panel 拖到第一个 Panel 容器上。如果将它们拖放到画布上，请确保将它们拖放到 Panel 上，而不是 Grid Panel（“My Grid Panel”）上方，否则它们将成为 Grid Panel 的子项，而不是第一个 panel 的子项。
接下来，将 Column Chart 拖到第三个 Panel 上，即您添加的最后一个 Panel，它应该是画布或检查器中最底部的 Panel。同样，请注意您放置它的位置。如果将其放置在画布中最后一个 Panel 的标题上，它将成为该 Panel 的子项。如果将其放置在标题下方的空白区域，它将成为您添加的第一个 panel 的子项。最安全的方法是将组件拖到检查器中，因为您可以确保将其放置在预期的组件上。
画布现在应如下所示
检查器将如下所示。请注意，选定的组件以深蓝色突出显示，其顶层父组件以浅蓝色突出显示。另请注意，检查器提供了项目树的精确视图：ColumnChart 是最后添加的 Panel 的子项，而最后添加的 Panel 又是第一个添加的 panel 的子项。如果您希望重新排序视图，则需要在检查器中执行此操作，您可以在其中上下拖动它们。
将视图添加到项目后，下一步是配置它们以在您正在构建的应用程序中使用，选择适当的布局并设置其他配置。让我们配置一些我们刚刚添加到 Architect 的组件。
如果您随时需要有关 Architect 中配置的更多信息，请将光标放在配置名称旁边的问号上。一两秒钟后，Architect 会显示配置的描述以及指向其 API 文档的链接。
第三个（最后一个或底部）Panel 仍应在画布或检查器中选中。如果未选中，请在任一位置选中它。查找 Panel 的 Flyout Config 按钮 - 它是画布中 Panel 右上角外的小轮子。单击它以打开 Flyout Config 窗口，其中包含一小组常用属性。这是它打开时的外观
滚动浏览“选择布局”下的列表，然后选择 fit。这将布局属性设置为 fit。您可以在检查器下的配置面板中完成相同的操作，您可以在其中向下滚动属性列表以查找布局，或者在过滤器框中键入 layout。
接下来，选择顶层 Panel（画布和检查器中最顶层的 Panel），然后单击 Flyout Config 按钮。将布局设置为 vbox。再次单击 Flyout Config，将对齐方式设置为 stretch，然后选中 autoScroll。（您可以将 Pack 设置保留为其默认值 start。）这将垂直排列 Grid 和子 Panel。要了解有关布局的更多信息，请参阅 布局。
我们将使用配置面板来设置下一个属性。在检查器中选择 Grid Panel。Architect 显示 Grid Panel 的配置面板，如下图所示。滚动浏览它以查看您可以为组件设置的标准配置。
命名顶层（第一个）Panel 并为其指定 ID。双击画布中的标题栏，并通过在 MyPanel 上键入 Car Listings 来更改其标题。您也可以通过选择 Panel 并在配置中设置 title 属性来执行此操作。在配置中，将 Panel id 属性设置为 carlistings。
注意： 此 ID 是全局的，并且必须是唯一的。您在此处设置的任何 ID 都不能用于其他组件，以确保 Architect 不会创建使用相同 ID 的多个组件。
接下来，查找 flex 属性。单击属性名称右侧的“值”字段（当前包含文本 (none)）。键入 1，按 Return 键，Grid Panel 现在将具有 flex 值为 1。配置面板将如下所示
对底部两个 Panel 中的每一个执行相同的操作。
对于 Architect 的高级使用，您可以添加自己的自定义配置。如果您没有看到组件所需的配置，请在配置面板顶部的“过滤器”字段中键入自定义配置的名称，然后单击“添加”。现在可以在配置中设置配置。
事件包括鼠标单击、鼠标悬停、点击、捏合和滑动。当用户执行其中一项操作时，应用程序必须做出适当的响应。这是使用工具箱中 Architect“行为”组下列出的组件实现的
换句话说，当视图触发的事件仅影响同一视图时，请使用基本事件绑定。接下来显示的简单事件绑定实际上就是一个很好的例子；该按钮仅影响其父面板的大小，而不会触及应用程序的任何其他部分。
事件通过“配置”面板添加到视图。查找“事件”属性，单击“值”下右侧的添加按钮，该按钮上有一个圆圈内包含加号（“+”），单击“步骤 1/1”下空白字段中的箭头以打开事件滚动列表，然后选择要使用的事件。如果需要，可以通过单击“配置”中“值”下右侧的清除按钮来删除事件。要向事件添加自定义代码，请在“检查器”中双击该事件（或在“检查器”中右键单击该事件并选择“编辑代码”）以打开代码编辑器。
为项目设置初始视图非常重要。这是用户首次打开应用程序时将出现的 UI 组件。Architect 使此操作变得容易：选择要首先显示的顶级视图，在“配置”面板中找到其初始视图属性，然后在旁边的框中打勾。您也可以在“检查器”中右键单击视图以打开其上下文菜单，然后选择“标记为初始视图”。
只有出现在“检查器”顶层的视图才能成为初始视图。请注意，在我们正在构建的示例中，只有我们刚刚重命名的第一个面板“Car Listings”出现在顶层。默认情况下，它是项目的初始视图，并且初始视图图标出现在其在“检查器”中的名称右侧，您可以在上面的“项目检查器”图像中看到，或者如果您一直在跟随操作，则可以在 Architect 中看到。
要了解其工作原理，请将另一个面板拖到“视图”节点，直接将其拖放到“视图”上。这将创建第二个顶级面板。右键单击它并选择“标记为初始视图”。Architect 会为其分配初始视图图标。由于我们添加此面板仅用于此示例目的，并且我们的项目不需要它，因此请将其删除。右键单击原始顶级面板（Car Listings），选择“标记为初始视图”，它将被指定为初始视图图标。
为项目创建通用初始视图的一个好方法是从“工具箱”向项目中添加一个 Viewport，并将其设置为初始视图。然后，其中的任何内容都将首先被看到。
这就是我们在这里要介绍的全部内容。有关深入了解如何构建包括控制器、数据存储和模型在内的桌面和移动应用程序，请参阅构建您的第一个桌面应用程序和构建您的第一个移动应用程序。
以下是一些使用视图的方法，当您了解更多关于在 Architect 中创建应用程序的信息时，这些方法将变得有用
创建链接实例
如果您需要提升组件的一部分——例如容器内的网格，或者作为顶级容器子级的某种容器——并在项目层次结构中将其上移以成为顶级组件（并使其成为其自己的类），则 Architect 的此功能将变得更加有用。基本上，这会将行为抽象到其自己的单独子类中。
转到 Architect 并查看我们在本指南前面开始构建的视图。拖动顶级面板（名为“MyPanel”）并将其拖放到“视图”上。在出现的对话框中单击“链接”。Architect 会创建一个面板的链接实例——原始面板在项目顶层的精确副本。
像我们刚刚创建的链接实例在构建复杂项目时非常有用。如果您创建同一组件的多个链接实例，您可以通过编辑原始组件一次性更改所有这些实例，并且每个链接实例都会继承所有更改。您仍然可以单独编辑每个链接实例；对链接实例所做的更改将覆盖您赋予原始组件的属性。当您使用“提升为类”功能时，这尤其有用。
提升为类
组件中的任何子项都可以提升为顶级组件，并在 Architect 项目目录中成为其自己的类。例如，网格列只能在最初创建时添加到网格面板或树形面板，因为它们本身没有任何用途。
为此，首先将一个网格面板拖到“检查器”中的“视图”。一个新的网格面板默认接收多个列。在“检查器”中右键单击“Boolean”（其中一列的标题），然后选择提升为类。
该列成为自己的顶级组件，并在“检查器”中被链接实例替换。当 Architect 导出项目时，它会为组件/类生成一个单独的 .js 文件。这适用于 Architect 中的大多数视图组件。
如果您与团队合作，使用此功能可以更轻松地共享和管理项目。除了生成更易于管理的代码外，将 Architect 项目组织为顶级组件的集合可以更轻松地继续开发项目。通过在主应用程序视图中使用链接实例，仍然可以轻松地查看上下文中的所有顶级组件。
创建覆盖
对于高级用户，Architect 允许覆盖任何组件（包括视图）的全部或部分代码。为此，请选择一个组件，转到其代码视图，然后单击创建覆盖。您将收到警告，提示此功能适用于高级用户，并询问您是否要继续。单击是以打开 Architect 代码编辑器并创建您自己的代码。稍后，您可以通过选择组件，转到代码视图，然后选择“删除覆盖”来删除覆盖。
Architect | 使用条款