Mats Bryntse
29 May 2012

Announcing Ext Scheduler and Ext Gantt 2.1

    We are very pleased to announce our latest versions of Ext Gantt & Ext Scheduler – v2.1 which […]



We are very pleased to announce our latest versions of Ext Gantt & Ext Scheduler – v2.1 which is based on Ext JS 4.1. Although this is “just” a point release, it is actually a very large release in terms of the features and improvements added. Back when our 2.0 version came out, it soon became obvious that its speed did not match that of the previous 1.x package. The cause was simple – the underlying Ext 4 GridPanel had become a much more advanced component. But while the Ext JS 4.0 GridPanel was far superior in flexibility and capabilities, its speed was not on par with its predecessor. With the recent release of Ext JS 4.1, things are now looking a lot better. We definitely see serious grid performance improvements in 4.1 and as part of our 2.1 release we also took the opportunity to refactor and improve some of the core classes of our components. We really hope you will notice a big overall speed improvement. In one of our upcoming blog posts we will provide benchmarks and performance charts comparing 2.1 vs 2.0.9.

We have also focused very hard on improving our test suite and we now have 1000+ assertions covering just the Ext Scheduler, with more to come. All our tests are included with each new release, so you can run these yourself by opening tests/index.html in any browser.


Ext Scheduler changes

The 2.1 release is compatible with Ext JS 4.1+ and has a few interesting new features (for a full list of changes since 2.0.9, please see the changelog). You can now easily control the interaction for a specific event by specifying “Draggable” and “Resizable” in its data properties. This gives you a very easy way to control access without using event listeners such as ‘beforeeventdrag’. We also refactored our data package – in every Model class in the Scheduler (and Gantt) you can now customize each field name, e.g. you no longer have to use ‘StartDate’ as the field name for the event start date.

Other important changes in Ext Scheduler in v2.1 are:


We have done a lot throughout the entire component to improve its rendering speed and snappiness. We were able to drastically reduce the scheduler HTML footprint by using a single grid column for the entire schedule. This cuts down the number of layout cycles performed by the underlying Ext layout system. To see the drastic effect of this, try rendering 2 weeks in 1 hour time columns in 2.1 and compare to 2.0.9. We have also updated our buffering support for Ext JS 4.1 for cases where you need to show hundreds or thousands or resource rows.

Resource zones

This feature has been requested for a long time and we’re happy to say that you can now highlight the schedule individually for each resource. Previously you had to use the timeCellRenderer method for this, which imposed limitations on which column resolution you could use. You can now add colors to any parts of the schedule, and the “External Drag Drop” sample has been updated to show you how. To use this feature, simply connect a new EventStore using the resourceZones config option.

It is really that simple:

    // Store containing the availability data for the resources
    var availabilityStore = Ext.create("MyApp.AvailabilityStore");

    var scheduler = Ext.create("MyApp.StaffScheduler", {
        startDate     : new Date(2011, 8, 1, 7),
        endDate       : new Date(2011, 8, 1, 19),
        resourceStore : resourceStore,
        resourceZones : availabilityStore,
        eventStore    : eventStore,

And here is a video showing it in action:


Ext Gantt changes:

Ext Gantt 2.1 has a lot of new features and improvements, along with a few new and updated examples. Here is a list of new things in 2.1:


Since Ext Gantt is a subclass of the Ext Scheduler, it automatically gets the same performance improvements. On top of that, we added a few more Gantt specific performance tweaks, and we hope that you will notice that the new version is a lot snappier than before (if not please tell us, performance is a key feature for us).

Task and Resource calendars

We now support defining a calendar for individual tasks and resources (whilst keeping the global calendar support for global holidays). Previously you could only define a whole day as being non-working time, but now calendars support defining availability times in hours and minutes. See this feature in action in the new “Calendars” example.

Task scheduling modes

The task model now supports different scheduling modes such as FixedDuration, Manual, Auto, EffortDriven and DynamicAssignment. When a change happens in the Gantt chart, the schedule of the tasks will adapt according to the assigned resources and indicated effort. This feature is demonstrated in the new “scheduling_modes” example.

Scrollable locked section

The default internal layout of the Gantt chart is now ‘border’, which also gives you a nice resize handle bar to easily resize the locked grid section.

TaskStore autoSync support

In Ext JS 4.1, TreeStore autoSync is now working reliably. We have made some changes in our data classes to ensure that as many changes as possible can be batched together. For example, if you change a task that causes 50 other tasks to be updated too, it will still just lead to 1 Ajax request.


For a full list of changes since 2.0.9, please see the changelog.


Looking to the future

The 2.1 release marks a major milestone for us, but we’re far from done. For the coming months, here are some things to look forward to:

License holders can download the full 2.1 release in our customer zone and to download the new trial version, click here.

Product updates