Mats Bryntse
7 January 2015

Ext Gantt & Ext Scheduler 3.0 GA Available

We’re excited to announce the 3.0 GA release of Ext Scheduler & Ext Gantt. This release marks a great milestone […]

We’re excited to announce the 3.0 GA release of Ext Scheduler & Ext Gantt. This release marks a great milestone and we’ve added lots of new functionality that we think you will find useful. The main new big features are found in the Gantt chart, where we’ve added a CrudManager, constraints support and task split support. We also upgraded our export feature to handle buffered rendering, meaning exporting really large data sets is no longer an issue. If you target touch devices, we’re happy to report that both the 3.x versions of the Gantt and Scheduler components are compatible with such devices. You can now drag drop, resize, set up dependencies using touch interaction.

Full download from our customer zone
Download a 45-day trial

Let’s take a look at some of the more interesting features of the new release first.

Gantt: Task Constraints

Task constraints allow you to specify scheduling rules to a task, defining how it should behave when being rescheduled. The updated Ext Gantt 3.0 supports 6 types of task constraints:

You can try this out in the updated Advanced sample. Please see the new constraints guide for further details.

Screen Shot 2014-11-07 at 12.37.52

Gantt: Split Tasks

One of the most requested features over the years has been the split task feature. We’re really happy to say that it’s now supported. You can split tasks easily using the context menu:

Screen Shot 2014-11-07 at 09.16.41

…or do it programmatically yourself:
[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
var taskStore = new Gnt.data.TaskStore({
root : {
children : [{
Id : 1,
StartDate : new Date(2014, 10, 3),
Duration : 4
}]
}
});
var task = taskStore.getById(1);

// Will split the task in two segments, 1 day + 3 days
task.split(new Date(2014, 10, 4));

console.log(task.getSegments().length) // => 2 segments now
console.log(task.getSegments()[0].getDuration()) // 1
console.log(task.getSegments()[1].getDuration()) // 3
[/crayon]

Try splitting a task in the updated Advanced sample.

Scheduler: Calendar View

Screen Shot 2015-01-06 at 23.37.04

The Scheduler 3.0 has a new Calendar view which was requested a lot the past years. This view can be configured to show various resolutions, but typically shows hours vertically and days horizontally. We’ve built a new weekview sample that you can try out right now.

Scheduler: Responsive Configuration

In Ext JS 5, components can be configured to react and adjust their appearance after a size change. You have full control of how the UI should look for any number of breakpoints. Below is a simple example making the Scheduler vertical if the width is less than the height of the component. This is a nice effect when using an iPad for example.

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
new Sch.panel.SchedulerGrid({

plugins : [
‘responsive’
],

responsiveConfig : {
“width<height” :=”” {=”” mode=”” “vertical”=”” },=”” “width=””>=height” : { mode : “horizontal” }
}
});
[/crayon]</height”>

Landscape – Horizontal

IMG_0009

Portrait – Vertical

IMG_0008

Upgrade Advice

If you are already using our 2.x line with Ext JS 4 today you essentially face two upgrades. One for your Ext JS code – upgrading to Ext JS 5.1+, and one for the Bryntum code. Don’t forget to study the general Ext JS 5 upgrade guide first. Here are a few things to think about as you start your upgrade process:

Ext JS: Browser Support

Since IE7 and below are no longer supported by Sencha you should find and remove any code or hacks involving Ext.isIE7 or CSS such as .x-ie7.

Ext JS: Quirks Mode Support Removed

Quirks mode is no longer supported by Ext JS so if you see code like Ext.isIEQuirks or CSS rules such as .x-quirks .sch-header-row { .. }, it’s time to remove those.

Ext JS: Scrolling Support

Scrolling is a bit more complex in Ext JS 5 due to the touch device support. If you want to manually scroll the grid, make sure you use the new Ext.panel.Table#scroll API instead of setting DOM values such as ‘scrollTop’ or ‘scrollLeft’.

Ext JS: Buffered Rendering

In Ext JS 5, buffered rendering is enabled by default. If you want to disable it, set ‘bufferedRenderer‘ to false.

Ext JS: Known Issues

We ship this release with a few known Ext JS patches to work around Sencha bugs. You can see them in our “Sch/patch” folder. You can also choose to run our code completely without patches (at your own risk), by setting Sch = { disableOverrides: true }; before including the Gantt script. A few other bugs remain open, such as using collapsed locked/normal sub-panels in a buffered grid. This seems still not supported by Sencha in Ext JS 5.

Bryntum: API Changes

There are also a few breaking changes in our 3.0 release but they should be very easy to work around. We have dropped support for Gnt.data.TaskStore#loadData method. This method is now available natively in the Ext.data.Store class.

The “Manual” value of the SchedulingMode field is deprecated in favor of the “ManuallyScheduled” field (so that a task can be “manually scheduled” and have a scheduling mode in the same time)

The “cascadeChanges” option on ‘Gnt.data.TaskStore’ class is now true by default.

Bryntum: Data Integration

Thanks to the new Crud Manager class, loading and saving changes is now much easier and more efficient. Instead of using one ajax request per data store, these data operations are now handled by the Crud Manager (if you decide to use it).

Please Give Feedback

In general we think the upgrade should be a very simple one for you. We have made very few (if any) changes to our 50+ examples. If we missed something, or you get stuck upgrading – we’re here to help. Please start a thread in our forums and we’ll look into it as soon as we can.

Mats Bryntse

Ext Gantt Ext Scheduler Product updates