expand

内容导航 Ext JS 都支持哪些浏览器? 桌面浏览器触屏设备我应该使用什么文档类型? 不用 Sencha Cmd 我该怎么构建应用? 不同框架文件都有些什么不同? 不使用 Sencha Cmd 我怎么修改应用的主题? 我能够编写一个同时支持桌面浏览器和 iPad 的简单应用吗? 如果 Ext JS 5 可以在平板上工作，为什么我不能也在智能手机上使用? 如何在 ExtJs 5 和 Touch 中共享控制器(controllers), stores 和模型(models)? 新旧版本之间有什么差异? Ext JS 5 的表格渲染要比 ExtJS 4 快吗? 性能上有提高吗? 有没有可能同时使用不同版本的 Ext JS? Ext JS 5 如何使用本地化? 不修改源码的情况下怎么覆写一个方法? 在 Ext JS 5 中怎么使用绘图类? 不用 Sencha Cmd 使用 Sencha 图表(Charts) 和绘图(Draw) 框架支持浏览器缩放吗? 什么是callParent，为什么和怎么使用它?

Ext JS - 问答

在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复，请访问 Ext JS 论坛或者提交一个支持申请.

如果你确信你的问题可以对本页有补充，请让我们知道!

注意: 下面的FAQ如果没有特别说明,适应于 Ext 5和更高版本.

Ext JS 都支持哪些浏览器?

桌面浏览器

IE8+ (只适用于标准模式)
Firefox (PC 和苹果电脑)
Safari 6+
Chrome (PC 和苹果电脑)
Opera (PC 和苹果电脑)

触屏设备

Safari
IE10 及其以上版本
Android 上的 Chrome

注意: Ext JS 5 现在不支持移动设备

我应该使用什么文档类型?

我们推荐使用 HTML5 文档类型. 为保证 Internet Explorer 不启用兼容模式(不支持兼容模式), 我们也推荐使用 X-UA-Compatible 元数据标签. 示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

没有 Sencha Cmd 我该怎么构建应用?

如果不用 Sencha Cmd，你可以通过包含框架，主题 CSS 以及你选择的主题对应的 JS override 类到你项目中的 index.html 文件的 head 中来构建应用.

在 Ext JS 中，主题的 CSS 及其 override 类文件以包(packages )的形式创建. 在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 中,主题被分成了 classic 和 modern 两个工具包. classic 的主题位于“{ExtJS-6-SDK}/classic/”目录内，包含:

theme-base (由框架使用，不允许直接配置)
theme-neutral (创建定制主题时使用，不允许直接配置)
theme-classic
theme-gray
theme-neptune
theme-neptune-touch (为平板优化)
theme-crisp
theme-crisp-touch (为平板优化)
theme-triton

Ext JS 6 的 modern 版主题位于“{ExtJS-6-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: 未压缩版. 包含框架全部类和 right-to-left 支持.

ext-all-rtl-sandbox-debug.js: 未压缩版. 包含框架全部类和 right-to-left 支持. 沙箱机制(Sandboxed)允许同其它版本的 Ext 一起使用.

ext-all-rtl-sandbox.js: 压缩版. 包含框架全部类和 right-to-left 支持. 沙箱机制(Sandboxed)允许同其它版本的 Ext 一起使用.

ext-all-rtl.js: 压缩版. 包含框架全部类和 right-to-left 支持.

ext-all-sandbox-debug.js: 未压缩版. 包含框架全部类. 沙箱机制(Sandboxed)允许同其它版本的 Ext 一起使用.

ext-all-sandbox.js: 压缩版. 包含框架全部类. 沙箱机制(Sandboxed)允许同其它版本的 Ext 一起使用.

不使用 Sencha Cmd 我怎么修改应用的主题?

你只需要简单的在 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>

我能够编写一个同时支持桌面浏览器和 iPad 的简单应用吗?

可以, 任何 Ext JS 5 应用应该都可以在桌面、平板及触摸设备的受支持浏览器上正常显示. 值得注意的是, 支持平板一般不需要额外的步骤.

就是说，在特定情形下需要注意两个地方. 第一对于只使用 Ext JS API 事件监听的开发者将不会受到影响. 然而, 如果你直接使用事件监听，或者你正在使用第三方 JavaScript 库监听事件的 ,可能会发生错误. 这是因为, 为了支持触摸手势, 事件处理系统做了一些改动.

关于事件代理机制的变动, 你可以在我们的事件指南和平板支持指南上找到更多资料.

第二个场景是触屏环境下模拟不了的某些鼠标事件. 例如, 没有和 mouseover, mouseout, mousenter, 或者 mouseleave 等价的触摸事件.

如果在你的应用中这些功能非常关键，那就可能需要提供一些变通的实现. 这经常意味着要用适当的触摸事件代替鼠标事件.

如果 Ext JS 5 可以在平板上工作，为什么我不能也在智能手机上使用?

桌面浏览器和平板控件目前不适合小屏幕. 为正确显示表格(Grids), 树(trees), 面板(panels), border 布局(layouts) 需要比较大的空间. 这个可能可以显示,但不是很精确地适应小屏幕.

采用 Ext JS 6, 你可以开发一个优化过的可运行在桌面浏览器、平板和移动设备上的简单、通用的应用. 这个应用可以包含通用事件处理逻辑、stores 和 models. 视图(views)部分根据你最终所需要使用的设备类型而分别使用 classic toolkit (旧版 Ext JS_)和 modern toolkit (旧版Sencha Touch) . 你可以在快速入门向导中阅读更多内容.

如何在 ExtJs 5 和 Touch 中共享控制器(controllers), stores 和模型(models)?

Ext JS 5 和 Sencha Touch 没有为共享 controllers, stores 和 models 进行优化.
不过, 在 Ext JS 6 中, classic 和 modern toolkit(Touch 和旧版 Ext JS 视图相关)可以共享. 参考快速入门向导获得更多信息.

新旧版本之间有什么差异?

关于已删除、新增、已废弃等变化的内容，请查看我们的版本间差异的指南:

注意: 我们相信, 开发人员在升级他们的应用时，通过借鉴这些差异指南, 可以获得很大的帮助. 可以这么说, 这些报告是自动生成的, 也许不能很精确的描述变更. 在文档更新、格式调整等情况下可能会留下一些无用的变更. 如果你在这些变更报告中发现了不正确的和不合适的内容，请在论坛上报告.

Ext JS 5 在表格渲染上要比 ExtJS 4 快吗? 性能上有提高吗?

在有些方面要快些. 在5版本中, Grid 的 dom 结构已经修改为使用一行一个table(table-per-row) 的方式, 这使得表格的渲染获得了重大的速度提升.

表单控件的 JS 布局和按钮干掉了 “流式(liquid)” CSS 布局. 在生成大型表单时使用 “form 布局”可以看到有性能提高. 这些改进应该有助于性能提升, 但仍然需要继续改进. 在下一个发布的版本中, 有更进一步的性能提升值得期待.

有没有可能同时使用不同版本的 Ext JS?

可以, 你可以使用 “沙盒(sandboxed)” 构建的版本, 这个可以修改顶层 JS 的命名空间, 和 CSS 前缀, 以避免冲突. 重要的提醒是不建议在生产环境使用两个不同版本的Ext JS, 因为这需要完整加载两套不同的 Ext JS 框架.

这意味着相当于加载了2次应用程序那么多的资源. “沙盒(sandboxed)” 构建的版本通常用于版本迁移或者在旧应用中使用新特性等临时需要.

Ext JS 5 怎么使用本地化?

可以通过使用本地化相关的的覆写(overrides), 在你的应用中支持本地化, 这个可以在 Sencha Cmd 生成的 app.json 文件中设置. 请查看本地化向导获得更多资料.

不修改源码的情况下怎么覆写一个方法?

创建一个覆写(override)类的推荐方法如下:

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) 首先, 为你的应用程序的 overrides 目录中的 override 类定义一个合适的命名空间

2) 添加 “override” 配置, 其值是你要覆写的类名, 在这个例子中,我们要覆写 Ext.panel.Panel.

3) 添加你准备覆写的函数. 你需要确认保留了所有相关的代码片段. 在这个例子中,我只是修改了 close 函数, 添加的代码是 console.log(). 如果你创建一个 panel 然后调用 panel.close(), 你会收到一个显示 “My Change to Close” 的控制台信息.

注意: 在你覆写的方法中, 你需要执行 this.callParent() 代码来调用目标类中的原方法. 如果要忽略这个方法, 转而去调用父类的相应实现(比如避免目标类中方法的bug), 你可以调用 this.callSuper() 来代替.

4) 添加一个新函数. 也许你会想像, Ext.panel.Panel 没有 helloWorld 方法. 然而, 我刚刚通过覆写增加了. 现在, 创建一个 panel ，并且执行 panel.helloWorld() 就会显示出一条 “Hello World” 的控制台消息.

在 Ext JS 5 中怎么使用绘图类?

绘图包现在包含在 sencha-charts 包中. 也就是说,为了使用绘图类，你需要包含 sencha charts.

如果你正在使用 Sencha Cmd, 这就只要简单的在app.json 文件中在 requires 数组中增加 “sencha-charts” 就可以了.

不用 Sencha Cmd 使用 Sencha Charts 和 Draw

在 Ext JS 5 中, 如果你要使用 charts(图表), 但又不想使用 Sencha Cmd, 你可以在你应用的 “index.html” 页面文件中简单地引用以下的文件.

<script type="text/javascript" src="{ExtJS-5-SDK}/build/packages/sencha-charts/build/sencha-charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-5-SDK}/build/packages/sencha-charts/build/classic/resources/sencha-charts-all.css">

在 Ext JS 6 中使用 classic toolkit:

<script type="text/javascript" src="{ExtJS-6-SDK}/build/packages/charts/classic/charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-6-SDK}/build/packages/charts/classic/classic/resources/charts-all.css">

在 Ext JS 6 中使用 modern toolkit:

<script type="text/javascript" src="{ExtJS-6-SDK}/build/packages/charts/modern/charts.js"></script>
<link rel="stylesheet" type="text/css" href="{ExtJS-6-SDK}/build/packages/charts/modern/modern-neptune/resources/charts-all.css">

框架支持浏览器缩放吗?

对于浏览器缩放, 我们没有官方支持, 但是大多数组件在现代的各种浏览器中应该都能使用.

什么是 callParent，为什么和怎么使用?

callParent 是 Sencha 类系统提供的一个用于调用你父/祖先类中的方法. 这个通常用于当你继承一个框架类或者覆写一个类中提供的方法(比如 onRender) 时. 当你在一个带参数的方法中调用 callParent 时，你有2种方式将这些参数传递到祖先类的方法中. 最好的方式是只传递特定必需的参数. 在这种情形下, 你可以通过数组传递:

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 5 的新的优化功能调用 callParent时, 就能发现性能的提升. 当启用这个优化器时, 这2个方法会按如下代码进行优化:

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 函数的 call 方法而不是 apply. 我们也避免了使用 arguments. 二者都是有名的高性能杀手. 原来我们甚至避免创建数组. 显然, 启用优化器还是有帮助的. 但在性能最为关键的代码中, 用显式的数组参数代替 arguments 是值得的.

最后更新

April 1, 2016

Ext JS 向导 ▼