jQuery MiniUI,Ajax Web开发

升级到 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