升级到 ExtJS 5的过程记录

 

最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑。由于 Sencha Cmd 的 sencha app upgrade 命令无法正常地讲项目升级至 ExtJS 5 (或许是方式不对) ,所以我的做法是新建一个 ExtJS 5 的项目,然后把 app 包拷贝过去,然后慢慢修复报错的东西,直到项目可以正常跑起。

说在前面:

升级的项目目前是一个十分初级的版本,代码量很少,只有导出报表和 dashboard 功能,主要是 Charts 的东西,并 涉及到 Grid 和 Tree 的使用,所以本文更多的是讲 ExtJS 5 Charts 部分的东西(变化的)。

升级到 ExtJS 5 过程中遇到的问题以及修复方式

## Uncaught Error: “Ext.util.Observable#addEvents” is deprecated.

addEvents 方法已经被移除。现在可以直接接收 fireEvent 自定义的 Events,不需要事先 addEvents。
但是代码内不能存在 addEvents 方法,否则会报错。

## [E] Ext.data.reader.Reader: Using the deprecated “root” configuration. Use “rootProperty” instead.

store 内的 ‘root’ 属性替换为 ‘rootProperty’

## Ext.LoadMask 无法正常工作

ExtJS 5 中,Ext.LoadMask 已经无法直接作用(target)于 Ext.getBody() ,如果要作用于 Ext.getBody() , 那么可以使用Ext.getBody().component

例子:

app.genWditingMask = new Ext.LoadMask( Ext.getBody().component, {
msg:"Generating report, please wait!"
});
## Invalid component “itemId”: “6-month-trend-at-standard”

itemId 不再支持数字开头。 ‘6-month-trend-at-standard’ – > ‘six-month-trend-at-standard’

## Ext JS Trial

ExtJS 在 Trial 版中加入了 Ext JS Trial 标识。这是使用 CSS after 伪类来显示的,所以我们只能通过修改 theming 来消除这些标志。

不仅如此,Trial 版的 tabpanel 的 tab title 无法显示(字体颜色和背景色一样)。

暂时不知道 Trial 版里面还有没有其它限制和问题,请购买 License 并下载完整的 ExtJS 5。(一般使用 ExtJS 的都是企业级应用,请购买 License 。避免法律上的风险)。

Extjs charts / Sencha charts

正如文章的开头所讲,这个项目主要是 charts 方面的东西,所以我把这一 part 单独列出来讲。 首先要说的是 ExtJS 5 中 Charts 的变化:

1. 不再默认引入进 ExtJS Src ,而是作为一个 package 的方式引入项目(开源协议的改变)

2. ExtJS 5 中,存在两个 charts ,分别是 extjs-charts 和 sencha-charts

extjs-charts 是 ExtJS 4 中用到的 charts 包,兼容老项目和旧的浏览器,不会有新的功能出现
sencha-charts 是 ExtJS 5 和 Sench Touch 的一个融合版, 为触屏设备做优化,并且只兼容 IE 8 +,性能比较好,会持续新增新功能
extjs-charts 比 sencha-charts 成熟,在细节方面处理得更好,extjs-charts 以后只作为 fallback 用,Sencha 官方已经不会再新增功能和做性能优化
3. extjs-charts 和 sencha-charts 不能同时在一个项目中使用

4. sencha-charts 有很多地方与 extjs-charts 不同,代码可能需要修改

5. sencha-charts 在新型浏览器中使用 Canvas 来绘制图表,在 IE 8 中使用 SVG ,而 extjs-charts 则都是使用 SVG 来绘制。

6. sencha-charts 引入了 charts 的动画交互效果以及 3D PIE 等新的功能。

下面是我在升级的过程中遇到的问题的一些记录和解决方案(从 extjs-charts 移植到 sencha-charts):

## GET xxx/ext/src/chart/Chart.js 404 (Not Found)

ExtJS 5 中 Chart 作为 packages 引入项目,而不作为默认的组件。
修改 app.json, requires 内加入 “ext-charts”,如:

"requires": [
"sencha-charts"
]
然后运行

sencha app refresh
sencha app build
进行刷新以及打包(要确保项目可以打包成功,可以先注释掉我们的代码)

注意,关于 ext-charts 和 sencha-charts 的区别:

ext-charts 是原 ExtJS 4.x 时候的图表组件,使用方式和原来的一样,使用 Ext.chart.Chart 。不再增加新的功能,仅作为兼容。


sencha-charts 是 ExtJS 5.x 的图表组建,运用于 ExtJS 5 和 Sencha Touch,针对触屏界面做优化,未来会加入新功能(推荐使用)。
sencha-charts 移除了 Ext.chart.Chart ,请使用 Ext.chart.CartesianChart (xtype: cartesian)代替

注意: ext-charts / sencha-charts 不能同时使用,否则会出错。
另外,目前的 ExtJS 5 官方 API 文档里面的 charts 部分还参杂着 Ext-charts 的东西,导致一些混乱。

## Unhandled Exception: [Ext.createByAlias] Unrecognized alias: axis.Numeric

sencha-charts 的 axes 的 type 属性的值,不再支持首字母大写的形似,只能首字母小写。将 Numeric 修改成 numeric 即可。其余的 type 同理。(ext-charts 支持首字母大小写都可以)

## Unhandled Exception: [Ext.create] Unrecognized class name / alias: series.column

sencha-charts 的 series.column 已经被移除,请使用 series.bar 代替。转换 bar / column 需要 flipXY 属性来进行配合。

## Chart 所有 mouseover 效果失效(包括高亮, tooltip)

请为 Chart 添加 interactions 属性(自己参考官方文档)。
interactions: ‘itemhighlight’

## Chart 内不显示 tooltip

将 tips 属性名修改成 tooltip ( ext-charts 使用 tips, sencha-charts 使用 tooltip)

## Pie 无法正常显示

Pie 的容器不是 Ext.chart.CartesianChart 和 Ext.chart.Chart, 而是 Ext.chart.PolarChart。
Pie 的 store 必须有默认值,否则就算 store.loadData 后也无法正常显示(应该是 sencha-charts bug)

最后

目前的升级,只是为代码进行移植修复,把 extjs-charts 移植成 sencha-charts ,并没有使用 ExtJS 5 的其它新的东西,比如 MVVM 模式。那么接下来我会持续重构这个分支,采用 MVVM 模式来处理,到时候会写新的文章来做技术分享。

由于项目是公司的,这里就不分享截图了。

感谢阅读。

作者: lingyired
原文: http://lingyi.red/upgrade-to-extjs5

升级到 ExtJS 5的过程记录的更多相关文章

  1. 升级Windows 10 正式版过程记录与经验

    升级Windows 10 正式版过程记录与经验 [多图预警]共50张,约4.6MB 系统概要: 预装Windows 8.1中文版 64位 C盘Users 文件夹已经挪动到D盘,并在原处建立了符号链接. ...

  2. CentOS 5.5 下安装Countly Web Server过程记录

    CentOS 5.5 下安装Countly Web Server过程记录 1. 系统更新与中文语言包安装 2. 基本环境配置: 2.1. NodeJS安装 依赖项安装 yum -y install g ...

  3. 升级 Elasticsearch 集群数量实战记录

    搜索引擎 升级 Elasticsearch 集群数量实战记录 现在线上有一个elasticsearch集群搜索服务有三台elasticsearch实例(es1.es2.es3),打算将其升级为5台(增 ...

  4. 将React Native 集成进现有OC项目中(过程记录) 、jsCodeLocation 生成方式总结

    将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...

  5. 双系统Ubuntu分区扩容过程记录

    本人电脑上安装了Win10 + Ubuntu 12.04双系统.前段时间因为在Ubuntu上做项目要安装一个比较大的软件,导致Ubuntu根分区的空间不够了.于是,从硬盘又分出来一部分空间,分给Ubu ...

  6. linux-i386(ubuntu)下编译安装gsoap_2.8.17过程记录

    过程记录 :  1.下载gsoap_2.8.17.zip 并 解压 : $unzip gsoap_2.8.17.zip     2.进入解压后的目录gsoap-2.8   3.自动配置编译环境:  $ ...

  7. 【转】android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创)

    原文网址:http://www.cnblogs.com/zdz8207/archive/2012/11/27/android-ndk-install.html android 最新 NDK r8 在w ...

  8. Ubuntu14.04 Tomcat 安装过程记录

    Ubuntu14.04 Tomcat 安装过程记录 检查java的版本 zhousp@ubuntu:~$ sudo java -version [sudo] password for zhousp: ...

  9. mercurial(Hg) Server 搭建 过程记录

    mercurial(Hg) Server 搭建 过程记录 1.  环境说明 只是测试搭建,环境为本机开发环境:win 8.1 + IIS8.5 软件准备: 2.  软件安装 先安装Python2.7, ...

随机推荐

  1. Gradle实战教程之依赖管理

    这是从我个人网站中复制过来的,原文地址:http://coolshell.info/blog/2015/05/gradle-dependency-management.html,转载请注明出处. 简要 ...

  2. Android中View绘制流程以及invalidate()等相关方法分析(转载的文章,出处在正文已表明)

    转载请注明出处:http://blog.csdn.net/qinjuning 前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 .同时 ...

  3. 九度OJ 1437 To Fill or Not to Fill -- 贪心算法

    题目地址:http://ac.jobdu.com/problem.php?pid=1437 题目描述: With highways available, driving a car from Hang ...

  4. (转)IOS中获取各种文件的目录路径的方法

    iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. documents,tmp,app,Library. (NSHomeDirectory ...

  5. wamp集成环境php多版本搭建(php5.5,php5.6,php7.0.6)

        首先需要搭建的版本可以在php官方(http://windows.php.net/download)下载对应的版本,X86对应的是32位操作系统,X64对应的是64位操作系统.    1:下载 ...

  6. 国内各大互联网公司UED(用户体验设计)团队博客介绍

     UED是什么UED = user experience design,用户体验设计.UED的通常理解,就是“我们做的一切都是为了呈现在您眼前的页面”.UED团队包括:交互设计师(Interactio ...

  7. C++相关资源

    http://www.cnblogs.com/xi52qian/p/4186983.html语言ISO/IEC JTC1/SC22/WG21 - The C++ Standards Committee ...

  8. 64位AutoItLibrary的安装

    安装AutoItLibrary,除了要先已经安装好Robotframework之外,先要安装一个叫pywin32的工具 第一步:pywin32的安装 pywin32的下载地址: http://sour ...

  9. Djang DJANGO_SETTINGS_MODULE

    在 site-packages\django 新建一个文件 ’settings.py‘ 内容如下: DEBUG = TrueDEFAULT_FROM_EMAIL = 'alangwansui@qq.c ...

  10. Sqlserver 原生 MD5 函数(转)

    --创建md5函数CREATE FUNCTION [dbo].[MD5](@src varchar(255) )RETURNS varchar(255)ASBEGIN    DECLARE @md5 ...