Integrating The Bryntum Scheduler With Ext JS Modern

My name Is Nigel White and I have been involved with Ext JS since its inception in 2007. I was part of the core development team from the start of the Sencha corporation until it was acquired by Idera. I then joined Bryntum to help with the development of a completely new Bryntum Scheduler component that could integrate into any javascript environment including Ext JS Modern.

The Ext JS Modern Grid, while excellent in approach, does not yet support locking columns which is a critical requirement when making any type of scheduler or Gantt chart. At Bryntum, we decided to develop a new grid architecture with the concept of buffered rendering, recycled DOM and support for multiple side-by-side grids all built into the design.

What is the new Scheduler?

The new Bryntum Scheduler which is built upon the Bryntum Grid is a ground-up reimagining of our industry leading Ext JS-based Scheduler component using pure web technologies with no proprietary libraries. Bryntum Scheduler uses ECMAScript, transpiled as needed to support whatever browsers the host application supports. It uses CSS3 layouts to run seamlessly inside whatever containing element the application may place it in.

Easy integration with Ext JS remains a core part of our design strategy. Many concepts will be already familiar to Ext JS developers, such as data stores which are linked to URLs which provide data services. Stores contain records which are encapsulations of business entities such as scheduled events. Records contain fields which in the Bryntum Scheduler are implemented as direct properties rather than being behind getter and setter methods. So an Event record will have startDate, endDate and name properties among others.

In this blog post we will examine the “Scheduler inside an Ext JS Modern Panel” example from our public examples page.

How to get a Scheduler into your Ext JS Modern application

In the simplest case, instantiating a Scheduler object configured with appendTo specifying the host element will get a Scheduler up and running in a simple web page. In the case of an Ext JS application, there will be a hosting Component who’s initialization process will render a Scheduler into the Component’s own element. We will want any properties of the Scheduler to be bound to data properties of the application’s ViewModel.

We also would like to have events fired by Bryntum Scheduler’s event firing mechanism to be relayed using Ext JS’s event firing mechanism so they can be handled in the usual way – by methods inside a ViewController. The solution which provides these facilities is to encapsulate the Bryntum Scheduler inside a special Ext JS Panel subclass, Bryntum.SchedulerPanel.

SchedulerPanel Implementation

The first task is to render the scheduler within the Panel’s body element. We do this by implementing the initialize method, and simply render the Scheduler when the Panel has performed its first layout. To do this we listen for the Ext JS Component painted event:

initialize : function() {
    var me = this;

    me.on({
        painted : function() {
            me.getScheduler().render(me.bodyElement.dom);
        },
        single : true
    });

    me.callParent();
}

The getScheduler method instantiates the Scheduler on demand. It imports config properties passed into the SchedulerPanel to configure the Scheduler. The configs available for a Bryntum Scheduler can be found here. One important part of this process is that the Scheduler has the 'x-layout-fit-item' class added to it, so that Ext JS’s CSS3 layout system applies styling to it which makes it always fit inside the SchedulerPanel’s body element.

Scheduler events

To export the events that the Scheduler fires, we listen for the catchAll pseudo event from the Scheduler, which is fired when any event is fired, and relay the passed event using the fireEvent method which SchedulerPanel inherits. Note that events from the Bryntum Scheduler system are objects containing informational properties. The firing object is included as the source property.

Binding to the ViewModel

ViewModel bindings operate on getters and setters which are usually injected into an Ext JS class by the config system. In this case, we export properties from the encapsulated Bryntum Scheduler by generating getters and setters which proxy through to those properties. In the example, the ViewModel’s rowHeight property is bound to a NumberField in the Ext JS part of the UI and also bound to the rowHeight property of the Scheduler.

bind : {
    rowHeight : '{rowHeight}'
},

Loading data into the Scheduler.

A Bryntum Scheduler is configured with a resourceStore and an eventStore which are configured in a similar way to Ext JS Stores. They are configured with URLs for the CRUD operations, and they read (and potentially update) your schedule data:

eventStore : {
    readUrl : 'data/events.json',
    autoLoad : true
},

resourceStore : {
    readUrl : 'data/resources.json',
    autoLoad : true
},

Editing tasks in the Scheduler

By default, the EventEdit feature is present in a Scheduler. It listens for editing gestures, ENTER on a focused event, or double tap on an event, or an invocation from the event context menu. It then provides its own editing UI to edit the properties of the event. In the example app, we listen for the beforeeventedit event which is fired before the default editing UI is shown. If we return false, then the default editing is vetoed, and we can use the application’s own UI to do this job. The event object signature is as follows:


The resource for an event is provided in a separate property because if the EventDragCreate feature is being used, a new event will not have been linked to the resource record yet.

  • It is important to note that Scheduler features fire their events through the owning Scheduler, though the events are documented within the feature that triggers the event.

In the example app, an Ext JS Dialog subclass is implemented called EventEditor. This contains a form which is loaded with the data from the event.

The ComboBox uses the same URL to read resources as was provided to the SchedulerPanel’s resourceStore. When editing is finished, a ViewController method is invoked to save the data which updates the event record from the form’s data:

editor.getEvent().set(values);

The set method of a record sets properties in the record from the passed object.

Conclusion

The new Bryntum Scheduler will integrate easily into any modern web application environment, and the similarity in concepts to Ext JS mean that Ext JS developers should find it very easy to make a Scheduler a seamless part of their Ext JS Modern applications. Over the coming weeks we will introduce you further to the Scheduler component and write more blog posts showing integration with other frameworks like Vue, Angular and React.

We very much look forward to seeing what you can do with it, please join the discussion in our forums and share your thoughts!

Try Ext JS Modern integration demo

Leave a Comment