Using the Ext Scheduler, Part 2

This is another article where we will explore the Ext Scheduler while we use it to build a hypothetical conference room reservations interface.  In Using the Ext Scheduler, Part 1, we set out to to build a scheduler that displays the reservations that exist for a number of conference rooms.  This time the goal is to add the the ability to create, edit and remove reservations.

We will allow for creation and edition of reservations by using the scheduler’s EventEditor plugin.  For deletions, we will use a simple context menu.  Let’s see how it is done.

Editing events in the Ext Scheduler

The first change we are going to make in order to support event edition is use a specialized version of the scheduler – the Sch.EditorSchedulerPanel class – as the data type for the scheduler. (In Using the Ext Scheduler, Part 1 we employed the Sch.SchedulerPanel class.)

ConfRooms.sch = new Sch.EditorSchedulerPanel({

// Configuration...

});

The scheduler’s event editor is a plugin (Sch.plugins.EventEditor class) that defines a number of UI elements that display next to the event being edited.  This is how our reservation editor will look:

In the editor, a built-in header region contains the input fields for the start date and duration of the event.  A separate region contains fields for any other event properties that we might want to include in the editor.  This region is configurable through the fieldsPanelConfig option of the EventEditor class.  Let’s write the code that defines our editor:

plugins: [
    this.editor = new Sch.plugins.EventEditor({
        height: 180,
        width: 270,
        buttonAlign: 'center',
        saveHandler: ConfRooms.onSave,
        saveHandlerScope: this,
        fieldsPanelConfig: {
            layout: 'form',
            border: false,
            cls: 'editorpanel',
            labelAlign: 'top',
            items: [
                descriptionField = new Ext.form.TextArea({
                    name: 'Description',
                    fieldLabel: 'Description',
                    anchor: '100%'
                })
            ]
        },
        listeners: {
            expand: function() {
                descriptionField.focus(true);
            }
        }
    })
]

Note how we use the fieldsPanelConfig.items property to add a text area so our users can change the description of the edited event, in this case a conference room reservation.

Another important configuration option of the event editor is saveHandler.  This option specifies the function that will take care of saving the changes made to the reservation.  This is the implementation of our saveHandler:

ConfRooms.onSave = function(formPanel, newStart, newEnd, record) {
     record.beginEdit();
     formPanel.getForm().updateRecord(record);
     record.set('StartDate', newStart);
     record.set('EndDate', newEnd);
     record.endEdit();

     if (!record.get('Id')) {
         this.grid.eventStore.add([event]);
     }
     formPanel.collapse();
}

Our handler first updates the reservation’s description through a call to the underlying form’s updateRecord() function, it then updates the start and end dates, and finally, it inspects the record’s id in order to determine if it is a new or an existing reservation.

Creating events in the Ext Scheduler

As depicted below, we will allow our users to create a reservation with a drag and drop gesture over the desired time period:

While the editor’s UI is automatically shown upon double-cliking on an existing reservation, we need to take care of showing the UI when the user creates a new reservation. This is why we will add a handler for the scheduler’s dragcreateend event:

dragcreateend: {
 fn: function(p, data, e) {
     var reservation = new ConfRooms.reservationsStore.recordType({
         Id: ConfRooms.nextId(),
         Description: 'Enter a description for this event',
         ReservedTo: 'Jorge Ramon',
         ResourceId: data.record.get('Id'),
         StartDate: data.startDate,
         EndDate: data.endDate
     });

     ConfRooms.reservationsStore.add(reservation);
     this.editor.show(reservation);
 },
 scope: this
}

The handler for dragcreateend first creates a new reservation record, capturing the start and end dates passed by the scheduler via the data parameter.  It then adds the new record to the reservations store, and displays the editor’s user interface by calling editor.show().

It really doesn’t take much effort to implement event edition in the Ext Scheduler.  Let’s now take a look at deleting events.

Deleting events in the Ext Scheduler

We already gave the users of our conference room reservation system the ability to create and edit reservations, but we are missing an easy way to delete reservations.  To accomplish this we will attach a “Delete” context menu to each reservation displayed on the scheduler.  Here’s a depiction of the menu:

We can attach this menu to the each reservation by taking advantage of the eventcontextmenu configuration option of the scheduler:

eventcontextmenu: {
 fn: function(g, rec, e) {
     e.stopEvent();
     if (!this.gCtx) {
         this.gCtx = new Ext.menu.Menu({
             items: [
                {
                    id: 'context-delete',
                    text: 'Delete event',
                    iconCls: 'icon-delete'
                }
            ]
         });

         this.gCtx.on('itemclick', function(item, e) {
             switch (item.id) {
                 case 'context-delete':
                     ConfRooms.sch.eventStore.remove(this.gCtx.rec);
                     break;

                 default:
                     throw item.id + ' is not a valid menu action';
                     break;
             }
         }, this);
     }
     this.gCtx.rec = rec;
     this.gCtx.showAt(e.getXY());
 }

The interesting part of the context menu definition is the itemclick handler, which is where we remove the reservation from its data store.

Conclusion

This brings to completion the features we set out to work on in this article, and we now have a simple conference room reservation system based on the Ext Scheduler.

I encourage you to try and experiment with the source code for this article, as well as check out the scheduler’s examples and support materials.

Downloads

Grab the code for the sample: Ext-Scheduler2.zip.

You can obtain the Ext Scheduler at http://www.ext-scheduler.com.