Ext Scheduler (calendar) 2.0 -- upgrade to 4.0

Original article: http://www.sencha.com/blog/ext-scheduler-2-0-upgrading-to-ext-js-4/

In the previous article "I introduced you to the Ext schedced", I introduced ExtJS's sched (calendar) components and resources. At Bryntum, we are busy upgrading it to ExtJS 4.0-based version. The upgraded schedule and Gantt Chart components will be restructured to be compatible with ExtJS 4.

In the previous version, the pass key components of the component were dependent on several extensions such as LockingGridView, ColumnHeaderGroup, maximized TreeGrid, and Saki Ext. ux. form. DateTime. These functions are already included in ExtJS 4, so we are glad to see that our component is now 100% Based on the code supported by Sencha. The following is the appearance of the 2.0 calendar component developed using the new TreePanel.

Understand ExtJS GridPanel and TreePanel

GridPanel is more or less rewritten in ExtJS 4. Grid of ExtJS 3 has a good effect on simple applications. If multiple functions are combined, the effect is not very good, such as attempting to combine functions such as locking columns, grouping rows, and grouping titles. In the previous version, in order to implement these function configurations in the GridView, Bryntum had a headache, resulting in a lot of repeated code. To extend the GridView to implement the Calendar function, we have to define a View class for all combinations of view types, resulting in some confusing class names, such as Sch. LockingGroupingSchedulerView. In addition, use Grid to edit inline cells through EditorGridPanel.

In ExtJS 4, you only need to add specific functions to the GridView and TreeView to implement different views, so that you can easily implement the calendar API. This minimizes repeated code and makes code maintenance a little more fun.

Another good thing is that the locked Grid is now composed of three independent panels: A GridPanel containing two sub gridpanels (or TreePanel.

Now, you can define the Grid on the left or right separately. In the first example, the locked TreePanel is defined as foldable and the Border layout is used in the panel to replace the default HBox layout. The following is a simple example code:

Var tree = Ext. create ('sch. panel. schedulerTree ', {<br/> title: 'airport departures', <br/> width: 900, <br/> height: 400, </p> <p> layout: 'border', </p> <p> schedulerConfig: {<br/> header: false, <br/> region: 'center' <br/> }, </p> <p> lockedGridConfig: {<br/> header: false, <br/> split: true, <br/> width: 200, <br/> region: 'west', <br/> collapseDirection: 'left', <br/> collapsible: tr Ue <br/>}, <br/>...
Many users require that the locked Grid be foldable, so we are glad to have added this feature with a small effort. It is very difficult to implement this function in ExtJS 3 by extending LockingGridView, which requires writing a lot of code and increasing the burden of code maintenance.

Another feature that is frequently required is that you can flip the horizontal view to display the resources of the horizontal axis and the time of the vertical axis. In ExtJS 4, this function is easily added to version 2.0.

Upgrade from ExtJS 3

Upgrading components to ExtJS 4 requires a considerable amount of work, which is different from adding tags and creating custom components based on the ExtJS class. If you simply override internal methods and use Class Members without documentation, there will be a big problem. Therefore, the upgrade journey begins with the development block code and classes. In addition, it is difficult to verify whether the upgraded class is successful without proper tests. Javascript unit testing and UI behavior debugging are quite difficult, especially when a class depends on other classes and application states. During the upgrade process, we realized that we urgently need to use unit tests to verify whether the existing APIs and functions have been implemented. Therefore, we used the JS unit test tool Nickolay Platonov created and optimized over the past two years to test the ExtJS application.

Developing ExtJS code using test-driven development has changed our working method. I bought your new test tool named "Siesta", which has helped us a lot, it ensures the unknown interrupt code. Thanks to PhantomJS for making our tests part of the continuous integration process. If you want to try the beta version, please contact us at the upcoming SenchaCon conference in Austin, Texas.

After all the calendar parts are updated, we perform final rendering and switching. Here, we note that ExtJS 4 supports dynamic loading of classes, and this requires that the class name and directory results must follow some conventions, this forces us to rethink how to use a clear way to structure and combine these classes so that the converted Code supports dynamic loading. For each class, We Have To explicitly specify the classes it depends on through the requires array. However, as long as the expression is clear, it is not difficult to find these dependency classes. The additional benefit is that it saves time to use dynamic loading during debugging because you no longer need to search for code in a single JS file. If you haven't started to use dynamic loading, we strongly recommend that you do this because it can save a lot of time.

Summary

Upgrading to ExtJS 4 is a challenge for us because Grid is rewritten in ExtJS 4 and the calendar uses Grid as the base class. We also encountered some minor problems when using the new tree function (mainly in the CRUD operation ). However, we have fixed these issues by rewriting some code. However, improvements in this area are very welcome. In retrospect, the effort to upgrade to the new ExtJS version is a great value, which makes the foundation for refactoring code on the new platform mature. Next, we will further port the component to Sencha Touch 2.0, and we are very much looking forward to its release.

Additional resources:

Demo address: Ext Scheduler 2.0

PhantomJS-related information

Sencha Forum

Author: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.