我觉得这个问题很有趣。当我不得不将我们的内部应用程序从旧版 Jxlib 迁移到 ExtJs4 时,我遇到了类似的挑战。将我的经验与@Lolo 的回答结合起来,我可以提出以下建议:
建立新的坚实基础。您可能很想将您的应用程序保留在 ExtJs 3.0 中并开始在其上移植新的 ExtJs 5.0 组件。如果你真的想利用 ExtJs 5.0 的所有新功能,你应该从 ExtJs 5.0 中的一个干净、简单的 MVC 应用程序开始,它可以像主窗口和主菜单一样小。然后,您可以将所有现有的菜单项绑定到现有的 ExtJs 3.0 代码。这将允许您从一个非常干净的东西开始,保留所有旧功能,而无需重写代码,并允许您使用遵循当前最佳实践建议的干净 ExtJs 5.0 代码开发所有新功能。
您将面临两个绊脚石:
您必须在 Javascript 和 CSS 中分离命名空间。在这里,我也建议更改 ExtJs 3.0 的前缀,而不是 Ext 5.0(如果 ExtJs 5.0 包含沙箱文件,我会忽略)。背后的原因是所有新的 ExtJs 5.0 代码都将与标准兼容,而只有旧的遗留代码变得不兼容(无论如何它已经是什么了)。不过,这将代表一些代码重构,因为您需要Ext.
用或类似替换所有代码中的所有出现Ext3.
(这同样适用于 CSS,但工作量会少得多)。我希望 ExtJs 3.0 有一个沙盒版本,因为我认为重构他们的代码需要很多工作(但并非不可能)。
ExtJs 5.0 的一个主要特性(与 4.x 版一样)是使用Sencha Cmd
. ExtJs 3.0 尚不存在此功能。我认为立即开始使用此工具至关重要。我将允许您真正利用所有增强功能(声明式编程而不是命令式、高级 MVC 和 MVVM 功能)。它将从根本上改变你的编码风格。
为了完成这项工作,您首先在一个 Javascript 文件中编译旧代码。Sencha Cmd 不能将其识别为 Ext 应用程序。然后您只需添加requires: 'Oldapp'
,Application.js
ExtJs 将包含一个名为Oldapp.js
. 该文件应定义一个类Oldapp
并包含应用程序代码的所有其余部分:
Ext.define('Oldapp', {
// Just what ever you need
})
// All the rest of the code of you old app
然后根据 Ext doc 中的 MVC 或 MVVM 规范(无论您喜欢什么)布局新代码的所有文件夹和文件,Sencha Cmd 将正确构建整个应用程序。
我认为这一切都可以让您立即利用所有新功能,建立在一个干净、标准的基础上,只需进行少量代码重构。听起来像是吃蛋糕也吃蛋糕,但这是可能的。
但这需要一个巨大的心理步骤:您必须像学习新东西一样学习 ExtJs 5.0,并尝试忘记您已经知道的关于 ExtJs 的一切。您将不再使用Ext.ready
,Ext.Loader
将在引擎盖下处理此问题。你也不会从声明中实例化 Ext 对象(禁止的panel = Ext.create({xtype: 'panel', ...
东西),坚持Ext.define('Myapp.view.Mypanel' ...
. 自 Ext 3.0 以来,还有许多其他方面发生了变化……
最后一点在我看来是最大的绊脚石,比之前解释的两个技术点要重要得多:重新教育自己很困难,但很重要。