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 - 问答的更多相关文章

  1. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  2. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  3. Ext.js细节:在MVC中处理Widget Column，GetCmp和ComponentQuery， Id和ItemId

    针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...

  4. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  5. 介绍Ext JS 4.2的新特性的《深入浅出Ext JS》上市

    以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发 ...

  6. Ext JS 4 老特征：statics 静态的变量和方法

    l   一.静态的变量和静态的方法 [译文原创Learning Ext JS 4 第51页] Statics的方法只属于类本身,而不属于任何一个实例,这就决定了我们是在定义类的内部来用statics方 ...

  7. Ext JS 4 新特性2：配置项属性（config）之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  8. Ext JS 4 新特性2：配置项属性（config）之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  9. CDH5X 安装oozie报错To enable Oozie web console install the Ext JS library.

    最近在CDH5.X 安装oozie 服务,服务安装完毕,访问oozie server ui,报如下错误: 页面提示: Oozie web console is disabled.To enable O ...

随机推荐

  1. 【Java并发编程实战】-----“J.U.C”：ReentrantReadWriteLock

    ReentrantLock实现了标准的互斥操作,也就是说在某一时刻只有有一个线程持有锁.ReentrantLock采用这种独占的保守锁直接,在一定程度上减低了吞吐量.在这种情况下任何的"读/ ...

  2. Go语言实战 - revel框架教程之缓存和Job

    所有的网站应该都会有一个非常简单的需求,首页一秒之内打开. 满足的方式主要有两种: 页面静态化,效果最好,对服务器基本没负担,只要带宽足够就好了.我知道一个PV过亿的站点就是全站静态(以前新浪也是), ...

  3. 在网上摘录一段对于IOC的解析，比较直观，大家观摩观摩

    其实IoC非常简单,基本思想就是面向接口的编程,只是老外给起了个名字名充分利用之. 简单的说,传统模式下,如果你要用钱,你需要去银行取,IoC模式下,银联在你家安了一个取款机,你直接找取款机要钱就可以 ...

  4. ASP.NET MVC系列：Area

    1. Area简介 ASP.NET MVC Area机制构建项目,可以将相对独立的功能模块切割划分,降低项目的耦合度. 2. Area设置Routing 新建Admin Area后,自动创建Admin ...

  5. MongoDB下载安装与简单增删改查

    Windows下MongoDB的安装和配置.启动和停止 下载地址:MongoDB的官方下载网址是:https://www.mongodb.org/downloads 安装步骤1. 点击下载的mongo ...

  6. Log4net入门（ASP.NET MVC 5篇）

    在前4篇Log4net入门文章中,我们讲述了log4net的一些简单用法,在这一篇中我们主要讲述如何在ASP.NET MVC 5项目中将日志信息写入SQL Server数据库中. 一.创建最简单的AS ...

  7. C# 给Word文档添加内容控件

    C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word ...

  8. 【Python五篇慢慢弹（4）】模块异常谈python

    模块异常谈python 作者:白宁超 2016年10月10日12:08:31 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给出的pythondo ...

  9. Azure Backup (3) 使用Azure备份服务，备份Azure虚拟机

    <Windows Azure Platform 系列文章目录> 本将介绍,如何使用Azure备份服务,备份Azure虚拟机. 我们先预先创建2台Windows VM (命名为LeiVM00 ...

  10. Navisworks Api Quantification

    Quantification  国外有的叫定量  我们国内一些施工方叫工程量. 通过TakeOff API的开发者有机会获得更多的数据和数据可通过图形用户界面. 1 添加Navisworks的Api ...