Ext JS - FAQ
许多类在使用配置对象创建（实例化）类时都有快捷名称。快捷名称被称为 alias（或 xtype，如果该类扩展自 Ext.Component）。别名/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 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
下面您将找到有关 Ext JS 的最常见问题的解答。如果您找不到您的问题的答案，请访问 Ext JS 论坛或提交支持票。
您还可以查看我们在 Sencha 博客上过去的所有“支持技巧”，以获取成功驾驭 Ext JS 的有用提示和技巧。
如果您认为您的问题值得添加到此页面，请告诉我们！
注意： 以下常见问题解答适用于 Ext 5 及更高版本，除非另有说明。
注意： Ext JS 5 目前不支持手机
我们建议使用 HTML5 文档类型。为了确保 Internet Explorer 不会激活兼容模式（不支持兼容模式），我们还建议使用 X-UA-Compatible meta 标签。例如
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
您可以在不使用 Sencha Cmd 的情况下构建应用程序，方法是在 index.html 文件的 head 中包含框架、主题 CSS 和您选择的主题的 JS 覆盖。
主题的 CSS 和覆盖文件在 Ext JS 中创建为包。在 Ext JS 5 中，主题位于“{ExtJS-5-SDK}/packages/”中。主题包括
在 Ext JS 6+ 中，主题在经典工具包和现代工具包之间拆分。经典主题位于“{ExtJS-7-SDK}/classic/”中，包括
Ext JS 7 现代主题位于“{ExtJS-7-SDK}/modern/”中，包括
注意： 我们建议使用 Sencha Cmd，因为上面的示例包含一个非常大的文件，其中包含所有内容。当使用 Sencha Cmd 时，您的应用程序仅获取它需要的位，这使其保持轻量级、响应迅速且干净。
入门指南将引导您完成使用 Sencha Cmd 生成应用程序的过程。
ext.js: 已压缩。动态加载扩展类的基础框架。
ext-all.js: 已压缩。包含整个框架。
ext-all-debug.js: 未压缩。包含整个框架
ext-debug.js: 未压缩。动态加载扩展类的基础框架。
ext-all-rtl-debug.js: 未压缩。包含整个框架和 从右到左的支持。
ext-all-rtl-sandbox-debug.js: 未压缩。包含整个框架和 从右到左的支持。沙盒化，允许与 Ext 的其他版本一起使用。
ext-all-rtl-sandbox.js: 已压缩。包含整个框架和 从右到左的支持。沙盒化，允许与 Ext 的版本一起使用。
ext-all-rtl.js: 已压缩。包含整个框架和 从右到左的支持。
ext-all-sandbox-debug.js: 未压缩。包含整个框架，沙盒化，允许与 Ext 的版本一起使用。
ext-all-sandbox.js: 已压缩。包含整个框架，沙盒化，允许与 Ext 的版本一起使用。
要设置应用程序的主题，只需在 index.html 的 head 中包含主题包的 CSS 和 JS 覆盖。例如
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="ext/build/ext-all-debug.js"></script>
<script type="text/javascript" src="ext/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
是的，任何 Ext JS 5+ 应用程序都应该在桌面和支持浏览器的平板电脑或触摸屏设备上正确显示。应该注意的是，通常不需要额外的步骤来支持平板电脑。
也就是说，在特定情况下，有两个领域可能需要注意。第一个不会影响仅使用 Ext JS API 事件侦听器的开发人员。但是，如果您直接附加侦听器，或者您正在使用直接附加侦听器的第三方 JavaScript 库，则直接附加的事件处理程序的时序可能会出现问题。这与为支持触摸手势而对事件系统所做的一些更改有关。
您可以在我们的 事件指南和我们的 平板电脑支持指南中找到有关事件委托更改的更多信息。
第二种情况涉及在触摸世界中没有明显类似物的鼠标事件。例如，没有触摸等效于 mouseover、mouseout、mouseenter 或 mouseleave 的事件。
如果该功能对您的应用程序至关重要，则可能有必要为这些交互提供替代实现。这通常意味着用适当的触摸手势替换鼠标事件。
桌面和平板电脑控件目前不适合小屏幕。Grid、Tree、Panel、Border 布局只是需要更多空间才能正确显示。它可能有效，但不太适合较小的屏幕。
使用 Ext JS 6，您可以编写一个通用的应用程序，该应用程序经过优化可在桌面、平板电脑和手机设备上运行。该应用程序可能包含通用的事件处理逻辑、Store 和模型。使用的视图将从经典工具包（旧版 Ext JS）和现代工具包（旧版 Sencha Touch）中提取，具体取决于您定位的设备配置文件。您可以在入门指南中阅读有关通用应用程序设置的更多信息。
Ext JS 5+ 和 Sencha Touch 未针对共享控制器、Store 和模型进行优化。
但是，它们在 Ext JS 6+ 中的现代工具包和经典工具包（分别是 Touch 和旧版 Ext JS 视图）之间共享。有关更多信息，请参阅入门指南。
要查看删除、添加、弃用等，请查看我们版本之间的差异指南
注意： 我们认为开发人员可以通过评估这些差异指南在升级应用程序时收集大量有用的信息。也就是说，这些报告是自动生成的，可能并不总是准确地描述更改。由于文档更新、格式遗漏等原因，可能会指示不需要的更改。如果您在这些报告中看到任何不正确或不良的内容，请在论坛上报告它们。
在某些领域它更快。版本 5 中更改了 Grid 标记以使用每行一个表格，这使得 Grid 渲染速度显着加快。
表单字段和按钮的 JS 布局已消除，转而使用“liquid”CSS 布局。在使用“表单布局”生成大型表单时，已经看到了性能改进。这些类型的改进应该有助于提高性能，但仍有工作要做。您可以期待在下一个版本中获得进一步的性能改进。
是的，您可以使用“沙盒”构建，它会更改顶级 JS 命名空间和 CSS 前缀以避免冲突。重要的是要注意，不建议在生产环境中使用沙盒化两个不同的版本，因为这需要加载两个完整版本的 Ext JS 框架。
这意味着您将加载两倍于典型“非沙盒”应用程序的资源。沙盒构建通常用于迁移或临时需要在旧应用程序中包含新功能的情况。
可以通过特定于语言环境的覆盖将本地化添加到您的应用程序，这些覆盖可以在您 Sencha Cmd 生成的 app.json 文件中设置。请参阅本地化指南以获取更多信息。
创建覆盖的首选方法如下
Ext.define('MyApp.overrides.panel.Panel', {
override: 'Ext.panel.Panel',
close: function() {
console.log('My Change to Close');
this.callParent();
},
helloWorld: function(){
console.log('Hello World');
}
});
1) 首先，使用应用程序覆盖文件夹的适当命名空间定义您的覆盖
2) 添加“override”配置，并为其赋值，该值等效于您要覆盖的类。在此示例中，我们正在覆盖 Ext.panel.Panel。
3) 添加您想要覆盖的函数。您需要确保保留所有相关的部分。在本例中，我只修改了 close 函数，添加了一个 console.log()。如果您创建一个面板，然后执行 panel.close()，您将收到一条控制台消息，内容为“My Change to Close”。
注意： 在您重写的方法中，您需要执行 this.callParent() 来调用目标类提供的原始方法。要绕过该方法并跳到超类实现（例如，为了避免目标类方法中的错误），您可以改为调用 this.callSuper()。
4) 完全添加一个新函数。正如您可能想象的那样，Ext.panel.Panel 不包含 helloWorld 方法。但是，我已经通过此覆盖添加了它。现在，创建一个面板并执行 panel.helloWorld() 将导致记录消息“Hello World”。
draw 包现在包含在 sencha-charts 包中。也就是说，您需要包含 sencha-charts 才能使用 draw 类（或 sencha-charts）。
如果您使用 Sencha Cmd，这就像在您的 app.json 文件中的 requires 数组中添加 “sencha-charts” 一样简单。
如果您想使用 charts，但不想使用 Sencha Cmd，您可以简单地将以下包含项添加到 Ext JS 7 中应用程序的 “index.html” 页面。
<script type="text/javascript" src="{ExtJS-7-SDK}/build/packages/sencha-charts/build/sencha-charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-7-SDK}/build/packages/sencha-charts/build/classic/resources/sencha-charts-all.css">
在 Ext JS 7 中使用 classic toolkit
<script type="text/javascript" src="{ExtJS-7-SDK}/build/packages/charts/classic/charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-7-SDK}/build/packages/charts/classic/classic/resources/charts-all.css">
在 Ext JS 7 中使用 modern toolkit
<script type="text/javascript" src="{ExtJS-7-SDK}/build/packages/charts/modern/charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-7-SDK}/build/packages/charts/modern/modern-neptune/resources/charts-all.css">
在大多数情况下，缩放功能如预期工作。但是，当放大时，可能需要额外的工作来正确渲染组件。如果您发现任何边缘情况，请告知我们，我们会将其列入改进计划。
callParent 是 Sencha 类系统 提供的方法，用于调用您的父类/祖先类中的方法。当您从框架类派生并覆盖它提供的方法（例如 onRender）时，通常会这样做。当您从带有参数的方法中调用 callParent 时，您有两种方法可以将这些参数传递给祖先类方法。最佳实践方法是仅使用您明确需要的参数。在这种情况下，您可以将这些参数以数组字面量的形式传递
Ext.define('App.view.MyPanel', {
extend: 'Ext.panel.Panel',
onRender: function (parentNode, index) {
this.callParent([ parentNode, index ]);
}
});
或者，您可以使用简写 arguments 关键字，如下所示
Ext.define('App.view.MyPanel', {
extend: 'Ext.panel.Panel',
onRender: function (parentNode, index) {
this.callParent(arguments);
}
});
这些差异可能看起来很小，但是当您使用 Sencha Cmd 对 callParent 进行优化时，性能提升可能是巨大的。启用优化器后，这两种方法将优化如下
onRender: function (parentNode, index) {
Ext.panel.Panel.prototype.onRender.apply(this, arguments);
}
或者
onRender: function (parentNode, index) {
Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
}
在第二种情况下，优化器能够使用 JavaScript Function 上的 call 方法而不是 apply。我们还避免使用 arguments。这两者都是众所周知的高性能禁忌。事实证明，我们甚至避免创建数组字面量。显然，仅仅启用优化就很有帮助，但在性能最关键的代码中，将 arguments 替换为显式数组是值得的。
Ext JS | 使用条款