升级到 ExtJS 5的过程记录

升级到 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 模式来处理，到时候会写新的文章来做技术分享。

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

感谢阅读。