Mats Bryntse
8 February 2013

Road to Ext Scheduler 2.2: Upgrade guide

We just released the first 2.2 beta version in the CustomerZone. This release has quite a few changes due to […]

We just released the first 2.2 beta version in the CustomerZone. This release has quite a few changes due to some major refactorings mentioned in my previous post. To sum up, we adapted a lot of the code to be shared with our Sencha Touch version and we have also tried hard to eliminate as many private Ext JS overrides as possible. A few of the changes in this release may break backwards compatibility, depending on how you use our components. Here is the API Changes section of the 2.2-beta-1 changelog:

[API CHANGES]
– BREAKING: forceFit now defined on Panel, it was previously on the View. Compatibility patch installed.
– BREAKING: Removed Sch.util.HeaderRenderers class (should no longer be required).
– BREAKING: Removed Sch.view.Locking class.
– BREAKING: Inner panel is no longer an instance of our Sch.panel.SchedulerXXX classes, it is whatever Ext JS decides
(normally a regular Ext.grid.Panel)
– ‘aftereventdrop’ now includes the dragged records as a new argument
– Removed ‘useDragProxy’ option of Sch.feature.DragDrop
– Removed ‘Sch.feature.DragZone’ class

Let’s walk through this list, one by one!

forceFit now defined on Panel

This one is pretty self explanatory, the forceFit config option which makes sure all the time columns fit inside the viewport is now defined on the panel level, instead of the view.

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
// v2.1 :
new SchedulerPanel({
viewConfig : { forceFit : true },

});

// v2.2 :
new SchedulerPanel({
forceFit : true,

});
[/crayon]

For the sake of backwards compatibility, we look for the flag on the viewConfig, so this change isn’t really breaking but you should still change your code if you use this config option.

Removed Sch.util.HeaderRenderers

This class was introduced as a performance booster in a previous version when every time column was implemented as its own Ext.grid.Column. We now only use one Ext.grid.Column for the entire schedule, meaning there is no overhead in having many cells as it previously was and the need for this class is gone. If you still require it for some reason, you can still keep the copy from the 2.1 release, though it’s no longer supported officially.

Removed Sch.view.Locking class

This class previously subclassed the Ext.grid.LockingView and relayed events from the inner ‘normal’ view to the top view. From the top view, it was then re-relayed to the top panel. In 2.2, the scheduler panel relays the SchedulerView events directly and there is no longer any need to override this private Ext JS class.

Inner panel is no longer an instance of our Sch.panel.SchedulerXXX classes

This is a quite major change, but makes it a lot easier for us maintain our product. In 2.1 we were overriding internals of the GridPanel which is never a good thing. We no longer use our own panel class for any of the child grids. In 2.1, the SchedulerPanel consisted of a top SchedulerPanel, with a locked GridPanel + a normal SchedulerPanel (which had a SchedulerView). In 2.2, there is a main SchedulerPanel, with a locked GridPanel and a normal GridPanel. The normal grid panel is using a SchedulerView. This could potentially be an issue for you if you have written your own plugins which assumes that the previously nested SchedulerPanel existed. An example:

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.define(“MyEditor”, {
extend : “Ext.form.FormPanel”,

lockableScope : ‘normal’,

init : function (grid) {

// => ERROR! getSchedulingView is not a property of Ext.grid.Panel
this.schedulerView = grid.getSchedulingView();

this.schedulerView.on({
afterrender : this.onSchedulerRender,
destroy : this.onSchedulerDestroy,
dragcreateend : this.onDragCreateEnd,

scope : this
});


},
[/crayon]

For sake of backwards compatibility, we added an inline override to make sure the ‘getScheduling’ method exists on the GridView, but you should not rely on its existence (you might get other similar errors about missing methods on the GridPanel). To update your code and fix the issue above, you have two options.

1. Register the plugin in the ‘top’ panel scope.

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.define(“MyEditor”, {
extend : “Ext.form.FormPanel”,

lockableScope : ‘top’, // Attach this plugin the ‘top’ panel which is the SchedulerPanel

init : function (grid) {

// => Works! getSchedulingView is a method of the SchedulerPanel
this.schedulerView = grid.getSchedulingView();


},
[/crayon]

2. Change to use ‘getView’ instead.

[crayon striped=”false” lang=”javascript” nums=”false” toolbar=”false”]
Ext.define(“MyEditor”, {
extend : “Ext.form.FormPanel”,

lockableScope : ‘normal’,

init : function (grid) {

// => Works! getView is a method of the GridPanel
this.schedulerView = grid.getView();


},
[/crayon]

Removed ‘useDragProxy’ option of Sch.feature.DragDrop

This option was introduced in the early days before we started using document.elementFromPoint for the drag drop implementation. All browsers support this reliably and this option should no longer be required.

Removed ‘Sch.feature.DragZone’ class

This class was introduced in the early days before we started using document.elementFromPoint for the drag drop implementation. If you rely on this class, you can still keep the source code from the previous version and maintain it – though it is no longer supported by us.

Please give us feedback

The refactorings we made for 2.2 will make a huge difference as we support newer Ext JS releases. We’re no longer overriding lots of private Ext JS internals and we have new unit tests to prove it. We have listed the breaking changes above and we hope we did not miss anything, if we did please let us know as soon as possible. We’re eager to hear about your experience and to get your feedback after you have upgraded to the new version. If you stumble upon any issues, please let us know by starting a thread in our forums.

Mats Bryntse

Development Ext Scheduler