Ext Scheduler（日程表） 2.0——升级到4.0

原文：http://www.sencha.com/blog/ext-scheduler-2-0-upgrading-to-ext-js-4/
 

 

在上一篇文章《I introduced you to the Ext Scheduler》中，我介绍了ExtJS的Scheduler(日程)组件和资源。在Bryntum，我们正忙着将其升级到基于ExtJS 4.0的版本。借此机会，升级后的日程和甘特图组件将会进行重构，以便兼容ExtJS 4。

在前一版本，组件的及格关键部件依赖于LockingGridView、ColumnHeaderGroup、最大化的TreeGrid和Saki的Ext.ux.form.DateTime等几个扩展。在ExtJS 4中，已包含这些功能，因而，我们很高兴看到我们的组件现在是100%基于Sencha支持的代码。以下是一个使用新的TreePanel开发的2.0版日程组件的外观。

 

 

了解ExtJS GridPanel和TreePanel

 

GridPanel在ExtJS 4中或多或少被重写了。ExtJS 3版本的Grid对于简单的应用效果很好，如果结合了多种功能，效果就不是太好了，如尝试结合锁定列、分组行和分组标题等功能。在前一版本，Bryntum为了在GridView中实现这些功能配置，着实头疼了一番，结果就是导致了很多的重复代码。为了扩展GridView以实现日程功能，我们不得不为视图类型的所有组合都单独定义一个视图类，从而导致了一些比较容易混淆的类名，如Sch. LockingGroupingSchedulerView。此外，还需要使用使用Grid，通过EditorGridPanel实现内联单元格编辑。
 

在ExtJS 4，只需要在GridView和TreeView中混入特定的功能，就可以实现不同的视图，从而可轻松的实现日程的API。这最大限度的减少了重复代码，并使代码维护工作多了一些乐趣。

另外一个相当不错的是，锁定Grid现在是由三个独立的面板组成：一个包含两个子GridPanel（或TreePanel）的GridPanel。

 

 

现在，用户可以单独对左边或右边的Grid进行定义。在第一个截图，锁定的TreePanel被定义为可折叠，且里面的面板使用了Border布局代替了默认使用的HBox布局，下面是一个简单示例代码：

var tree = Ext.create('Sch.panel.SchedulerTree', {
    title       : 'Airport departures',
    width       : 900,
    height      : 400,

    layout : 'border',

    schedulerConfig : {
        header : false,
        region : 'center'
    },

    lockedGridConfig : {
        header : false,
        split: true,
        width : 200,
        region : 'west',
        collapseDirection : 'left',
        collapsible : true
    },
…

许多用户都要求锁定Grid是可折叠，因此，我们很高兴通过小小的努力添加了这个功能。此功能如果要在ExtJS 3中通过扩展LockingGridView实现，很困难，这需要编写大量代码和增加代码维护的负担。

 

另外一个频繁被要求的功能是，可翻转水平视图，以显示水平轴的资源和垂直轴的时间。在ExtJS 4，这功能很容易就添加到2.0版了。

 

 

从ExtJS 3升级的工作

将组件升级到ExtJS 4自然需要相当多的工作，这与你在ExtJS类基础上添加添加标记和功能创建自定义组件大不相同。如果只是简单的重写内部方法和使用没有文档的类成员，那会存在很大的问题，因而，升级之旅是从一块块代码，一个个类开始的。而且，没有适当的测试，也很难验证出升级后的类是否成功。做Javascript单元测试和UI行为调试相当的困难，尤其是在一个类依赖于其它类和应用状态的时候。在升级工作进行到一般的时候，我们意识到，我们迫切需要通过单元测试来验证现有API和功能是否都已实现。因此，我们使用了在过去两年间创建和优化的JS单元测试工具Nickolay Platonov来测试ExtJS应用。

以测试驱动开发方式开发我们的ExtJS代码改变了我们的工作方式，我买你新的代号为“Siesta”的测试工具帮了我们大忙，它确保了未知的中断代码。很感谢PhantomJS，可以让我们的测试成为持续集成过程的一部分。如果你想尝试一下beta版本，请在在德克萨斯州奥斯汀即将召开的SenchaCon大会与我们联系。

所有日程部件更新完成后，我们进行最后的渲染和交换工作。在这里，我们注意到在ExtJS 4支持类的动态加载，而这要求类名和目录结果必须遵循一些约定，这迫使我们要重新考虑如何使用一种清晰的方式架构和组合这些类，以便转换后的代码支持动态加载。对于每个类，我们不得不通过requires数组明确指出它依赖那些类。不过，只要表达清晰，要找这些依赖类也不难。额外的好处是，在调试时使用动态加载非常节省时间，这是因为不再需要在一个单一的JS文件内搜索代码了。如果你还没开始使用动态加载，我们强烈建议你这么做，因为这可节省大量的时间。

总结

升级到ExtJS 4，对我们来说，是一个挑战，因为Grid在ExtJS 4被重写了，而日程是使用Grid作为基类的。在使用新的树功能是我们也碰到一些小麻烦（主要是CRUD操作方面的）。但是，我们通过重写部分代码理清了这些问题。不过，在这方面的改善是非常受欢迎的。回想起来，升级到新的ExtJS版本的努力是超值的，这让我们在新平台上重构代码的基础也成熟了许多。接下来，我们将进一步将组件移植到Sencha Touch 2.0,我们非常期待他的发布。

 

附加资源：

演示地址：Ext Scheduler 2.0

PhantomJS的相关信息

Sencha Forum

 

作者：Mats Bryntse
Mats has been active in the Ext JS community for the past four years and started two Ext JS user groups in both San Francisco and Malmö. Currently Mats is running his own company Bryntum, which creates advanced extensions for Ext JS and Sencha Touch. In his spare time Mats enjoys badminton and skiing.