目录
Ext JS 支持哪些浏览器? 桌面 触摸屏 我应该使用什么文档类型? 如何在不使用 Sencha Cmd 的情况下构建应用程序? 不同框架文件之间有什么区别? 如何在不使用 Sencha Cmd 的情况下更改应用程序的主题? 我可以为桌面和 iPad 编写单个应用程序吗? 如果 Ext JS 5+ 可以在平板电脑上运行,为什么我不应该在智能手机上使用它呢? 我们如何在 ExtJs 5+ 和 Touch 之间共享控制器、Store、模型? 如何查看版本之间的更改? Ext JS 5+ 渲染表格是否比 ExtJS 4 更快?性能是否有所提高? 是否可以同时使用两个不同版本的 Ext JS? 我们应该如何在 Ext JS 7 中利用本地化? 如何在不编辑源代码的情况下覆盖方法? 如何在 7 中使用 Draw 类? 在不使用 Sencha Cmd 的情况下使用 Sencha Charts 和 Draw 框架是否支持浏览器缩放? 什么是 callParent,为什么/我应该如何使用它?
Ext JS - FAQ
下面您将找到有关 Ext JS 的最常见问题的解答。如果您找不到您的问题的答案,请访问 Ext JS 论坛或提交支持票。
您还可以查看我们在 Sencha 博客上过去的所有“支持技巧”,以获取成功驾驭 Ext JS 的有用提示和技巧。
如果您认为您的问题值得添加到此页面,请告诉我们!
注意: 以下常见问题解答适用于 Ext 5 及更高版本,除非另有说明。
Ext JS 支持哪些浏览器?
桌面
Microsoft Edge 12
IE8+(仅标准模式)
Firefox (PC & Mac)
Safari 11+(2017)
Safari 10(2016)
Chrome 43+(PC & Mac)
Opera (PC & Mac)
触摸屏
Safari
IE10 及以上
Android 上的 Chrome
注意: Ext JS 5 目前不支持手机
我应该使用什么文档类型?
我们建议使用 HTML5 文档类型。为了确保 Internet Explorer 不会激活兼容模式(不支持兼容模式),我们还建议使用 X-UA-Compatible meta 标签。例如
如何在不使用 Sencha Cmd 的情况下构建应用程序?
您可以在不使用 Sencha Cmd 的情况下构建应用程序,方法是在 index.html 文件的 head 中包含框架、主题 CSS 和您选择的主题的 JS 覆盖。
主题的 CSS 和覆盖文件在 Ext JS 中创建为包。在 Ext JS 5 中,主题位于“{ExtJS-5-SDK}/packages/”中。主题包括
ext-theme-base(由框架使用,不应直接配置)
ext-theme-neutral(在创建自定义主题时使用,不应直接配置)
ext-theme-classic
ext-theme-gray
ext-theme-neptune
ext-theme-neptune-touch(针对平板电脑优化)
ext-theme-crisp
ext-theme-crisp-touch(针对平板电脑优化)
在 Ext JS 6+ 中,主题在经典工具包和现代工具包之间拆分。经典主题位于“{ExtJS-7-SDK}/classic/”中,包括
theme-base(由框架使用,不应直接配置)
theme-neutral(在创建自定义主题时使用,不应直接配置)
theme-classic
theme-gray
theme-neptune
theme-neptune-touch(针对平板电脑优化)
theme-crisp
theme-crisp-touch(针对平板电脑优化)
theme-triton
Ext JS 7 现代主题位于“{ExtJS-7-SDK}/modern/”中,包括
theme-base(由框架使用,不应直接配置)
theme-blackberry
theme-cupertino
theme-cupertino-classic
theme-mountainview
theme-neptune
theme-windows
注意: 我们建议使用 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 的版本一起使用。
如何在不使用 Sencha Cmd 的情况下更改应用程序的主题?
要设置应用程序的主题,只需在 index.html 的 head 中包含主题包的 CSS 和 JS 覆盖。例如
我可以为桌面和 iPad 编写单个应用程序吗?
是的,任何 Ext JS 5+ 应用程序都应该在桌面和支持浏览器的平板电脑或触摸屏设备上正确显示。应该注意的是,通常不需要额外的步骤来支持平板电脑。
也就是说,在特定情况下,有两个领域可能需要注意。第一个不会影响仅使用 Ext JS API 事件侦听器的开发人员。但是,如果您直接附加侦听器,或者您正在使用直接附加侦听器的第三方 JavaScript 库,则直接附加的事件处理程序的时序可能会出现问题。这与为支持触摸手势而对事件系统所做的一些更改有关。
您可以在我们的 事件指南和我们的 平板电脑支持指南中找到有关事件委托更改的更多信息。
第二种情况涉及在触摸世界中没有明显类似物的鼠标事件。例如,没有触摸等效于 mouseover、mouseout、mouseenter 或 mouseleave 的事件。
如果该功能对您的应用程序至关重要,则可能有必要为这些交互提供替代实现。这通常意味着用适当的触摸手势替换鼠标事件。
如果 Ext JS 5+ 可以在平板电脑上运行,为什么我不应该在智能手机上使用它呢?
桌面和平板电脑控件目前不适合小屏幕。Grid、Tree、Panel、Border 布局只是需要更多空间才能正确显示。它可能有效,但不太适合较小的屏幕。
使用 Ext JS 6,您可以编写一个通用的应用程序,该应用程序经过优化可在桌面、平板电脑和手机设备上运行。该应用程序可能包含通用的事件处理逻辑、Store 和模型。使用的视图将从经典工具包(旧版 Ext JS)和现代工具包(旧版 Sencha Touch)中提取,具体取决于您定位的设备配置文件。您可以在入门指南中阅读有关通用应用程序设置的更多信息。
我们如何在 ExtJs 5+ 和 Touch 之间共享控制器、Store、模型?
Ext JS 5+ 和 Sencha Touch 未针对共享控制器、Store 和模型进行优化。但是,它们在 Ext JS 6+ 中的现代工具包和经典工具包(分别是 Touch 和旧版 Ext JS 视图)之间共享。有关更多信息,请参阅入门指南。
如何查看版本之间的更改?
要查看删除、添加、弃用等,请查看我们版本之间的差异指南
Ext JS 4.2.3 到 Ext JS 5.0.0
Ext JS 5.0.0 到 Ext JS 5.0.1
Ext JS 5.0.1 到 Ext JS 5.1.0
Ext JS 5.1.0 到 Ext JS 5.1.1
Ext JS 5.1.1 到 Ext JS 5.1.2
Ext JS 5.1.2 到 Ext JS 5.1.3
Touch 2.4.1 到 Ext JS 6.0.0 现代工具包
Ext JS 5.1.1 到 Ext JS 6.0.0 经典工具包
Ext JS 6.0.0 到 Ext JS 6.0.1 现代工具包
Ext JS 6.0.0 到 Ext JS 6.0.1 经典工具包
Ext JS 6.0.1 到 Ext JS 6.0.2 现代工具包
Ext JS 6.0.1 到 Ext JS 6.0.2 经典工具包
Ext JS 6.0.2 到 Ext JS 6.2.0 现代工具包
Ext JS 6.0.2 到 Ext JS 6.2.0 经典工具包
Ext JS 6.2.0 到 Ext JS 6.2.1 现代工具包
Ext JS 6.2.0 到 Ext JS 6.2.1 经典工具包
Ext JS 6.2.1 到 Ext JS 6.5.0 现代工具包
Ext JS 6.2.1 到 Ext JS 6.5.0 经典工具包
Ext JS 6.5.0 到 Ext JS 6.5.1 现代工具包
Ext JS 6.5.0 到 Ext JS 6.5.1 经典工具包
Ext JS 6.5.1 到 Ext JS 6.5.2 现代工具包
Ext JS 6.5.1 到 Ext JS 6.5.2 经典工具包
Ext JS 6.5.2 到 Ext JS 6.5.3 现代工具包
Ext JS 6.5.2 到 Ext JS 6.5.3 经典工具包
Ext JS 6.5.3 到 Ext JS 6.6.0 现代工具包
Ext JS 6.5.3 到 Ext JS 6.6.0 经典工具包
Ext JS 6.6.0 到 Ext JS 6.7.0 现代工具包
Ext JS 6.6.0 到 Ext JS 6.7.0 经典工具包
Ext JS 6.7.0 到 Ext JS 7.0.0 现代工具包
Ext JS 6.7.0 到 Ext JS 7.0.0 经典工具包
Ext JS 7.0.0 到 Ext JS 7.1.0 经典工具包
Ext JS 7.0.0 到 Ext JS 7.1.0 经典工具包
注意: 我们认为开发人员可以通过评估这些差异指南在升级应用程序时收集大量有用的信息。也就是说,这些报告是自动生成的,可能并不总是准确地描述更改。由于文档更新、格式遗漏等原因,可能会指示不需要的更改。如果您在这些报告中看到任何不正确或不良的内容,请在论坛上报告它们。
Ext JS 5+ 渲染表格是否比 ExtJS 4 更快?性能是否有所提高?
在某些领域它更快。版本 5 中更改了 Grid 标记以使用每行一个表格,这使得 Grid 渲染速度显着加快。
表单字段和按钮的 JS 布局已消除,转而使用“liquid”CSS 布局。在使用“表单布局”生成大型表单时,已经看到了性能改进。这些类型的改进应该有助于提高性能,但仍有工作要做。您可以期待在下一个版本中获得进一步的性能改进。
是否可以同时使用两个不同版本的 Ext JS?
是的,您可以使用“沙盒”构建,它会更改顶级 JS 命名空间和 CSS 前缀以避免冲突。重要的是要注意,不建议在生产环境中使用沙盒化两个不同的版本,因为这需要加载两个完整版本的 Ext JS 框架。
这意味着您将加载两倍于典型“非沙盒”应用程序的资源。沙盒构建通常用于迁移或临时需要在旧应用程序中包含新功能的情况。
我们应该如何在 Ext JS 7 中利用本地化?
可以通过特定于语言环境的覆盖将本地化添加到您的应用程序,这些覆盖可以在您 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”。
如何在 Ext JS 7 中使用 Draw 类?
draw 包现在包含在 sencha-charts 包中。也就是说,您需要包含 sencha-charts 才能使用 draw 类(或 sencha-charts)。
如果您使用 Sencha Cmd,这就像在您的 app.json 文件中的 requires 数组中添加 “sencha-charts” 一样简单。
在不使用 Sencha Cmd 的情况下使用 Sencha Charts 和 Draw
如果您想使用 charts,但不想使用 Sencha Cmd,您可以简单地将以下包含项添加到 Ext JS 7 中应用程序的 “index.html” 页面。
在 Ext JS 7 中使用 classic toolkit
在 Ext JS 7 中使用 modern toolkit
框架是否支持浏览器缩放?
在大多数情况下,缩放功能如预期工作。但是,当放大时,可能需要额外的工作来正确渲染组件。如果您发现任何边缘情况,请告知我们,我们会将其列入改进计划。
什么是 callParent,以及我为什么要/如何使用它?
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 替换为显式数组是值得的。