The source code

    /**
     * @class Ext.ensible.cal.EventEditForm
     * @extends Ext.form.FormPanel
     * A custom form used for detailed editing of events.
     * This is pretty much a standard form that is simply pre-configured for the options needed by the
     * calendar components. It is also configured to automatically bind records of type {@link Ext.ensible.cal.EventRecord}
     * to and from the form.
     * This form also provides custom events specific to the calendar so that other calendar components can be easily
     * notified when an event has been edited via this component.
     * The default configs are as follows:
    labelWidth: 65,
    labelWidthRightCol: 65,
    colWidthLeft: .6,
    colWidthRight: .4,
    title: 'Event Form',
    titleTextAdd: 'Add Event',
    titleTextEdit: 'Edit Event',
    titleLabelText: 'Title',
    datesLabelText: 'When',
    reminderLabelText: 'Reminder',
    notesLabelText: 'Notes',
    locationLabelText: 'Location',
    webLinkLabelText: 'Web Link',
    calendarLabelText: 'Calendar',
    repeatsLabelText: 'Repeats',
    saveButtonText: 'Save',
    deleteButtonText: 'Delete',
    cancelButtonText: 'Cancel',
    bodyStyle: 'padding:20px 20px 10px;',
    border: false,
    buttonAlign: 'center',
    autoHeight: true // to allow for the notes field to autogrow

     * @constructor
     * @param {Object} config The config object
     */
    Ext.ensible.cal.EventEditForm = Ext.extend(Ext.form.FormPanel, {
        labelWidth: 65,
        labelWidthRightCol: 65,
        colWidthLeft: .6,
        colWidthRight: .4,
        title: 'Event Form',
        titleTextAdd: 'Add Event',
        titleTextEdit: 'Edit Event',
        titleLabelText: 'Title',
        datesLabelText: 'When',
        reminderLabelText: 'Reminder',
        notesLabelText: 'Notes',
        locationLabelText: 'Location',
        webLinkLabelText: 'Web Link',
        calendarLabelText: 'Calendar',
        repeatsLabelText: 'Repeats',
        saveButtonText: 'Save',
        deleteButtonText: 'Delete',
        cancelButtonText: 'Cancel',
        bodyStyle: 'padding:20px 20px 10px;',
        border: false,
        buttonAlign: 'center',
        autoHeight: true, // to allow for the notes field to autogrow

        /* // not currently supported
         * @cfg {Boolean} enableRecurrence
         * True to show the recurrence field, false to hide it (default). Note that recurrence requires
         * something on the server-side that can parse the iCal RRULE format in order to generate the
         * instances of recurring events to display on the calendar, so this field should only be enabled
         * if the server supports it.
         */
        enableRecurrence: false,

        // private properties:
        layout: 'column',
        cls: 'ext-evt-edit-form',

        // private
        initComponent: function(){

            this.addEvents({
                /**
                 * @event eventadd
                 * Fires after a new event is added
                 * @param {Ext.ensible.cal.EventEditForm} this
                 * @param {Ext.ensible.cal.EventRecord} rec The new {@link Ext.ensible.cal.EventRecord record} that was added
                 */
                eventadd: true,
                /**
                 * @event eventupdate
                 * Fires after an existing event is updated
                 * @param {Ext.ensible.cal.EventEditForm} this
                 * @param {Ext.ensible.cal.EventRecord} rec The new {@link Ext.ensible.cal.EventRecord record} that was updated
                 */
                eventupdate: true,
                /**
                 * @event eventdelete
                 * Fires after an event is deleted
                 * @param {Ext.ensible.cal.EventEditForm} this
                 * @param {Ext.ensible.cal.EventRecord} rec The new {@link Ext.ensible.cal.EventRecord record} that was deleted
                 */
                eventdelete: true,
                /**
                 * @event eventcancel
                 * Fires after an event add/edit operation is canceled by the user and no store update took place
                 * @param {Ext.ensible.cal.EventEditForm} this
                 * @param {Ext.ensible.cal.EventRecord} rec The new {@link Ext.ensible.cal.EventRecord record} that was canceled
                 */
                eventcancel: true
            });

            this.titleField = new Ext.form.TextField({
                fieldLabel: this.titleLabelText,
                name: Ext.ensible.cal.EventMappings.Title.name,
                anchor: '90%'
            });
            this.dateRangeField = new Ext.ensible.cal.DateRangeField({
                fieldLabel: this.datesLabelText,
                singleLine: false,
                anchor: '90%',
                listeners: {
                    'change': this.onDateChange.createDelegate(this)
                }
            });
            this.reminderField = new Ext.ensible.cal.ReminderField({
                name: Ext.ensible.cal.EventMappings.Reminder.name,
                fieldLabel: this.reminderLabelText
            });
            this.notesField = new Ext.form.TextArea({
                fieldLabel: this.notesLabelText,
                name: Ext.ensible.cal.EventMappings.Notes.name,
                grow: true,
                growMax: 150,
                anchor: '100%'
            });
            this.locationField = new Ext.form.TextField({
                fieldLabel: this.locationLabelText,
                name: Ext.ensible.cal.EventMappings.Location.name,
                anchor: '100%'
            });
            this.urlField = new Ext.form.TextField({
                fieldLabel: this.webLinkLabelText,
                name: Ext.ensible.cal.EventMappings.Url.name,
                anchor: '100%'
            });

            var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
                rightFields = [this.notesField, this.locationField, this.urlField];

            if(this.enableRecurrence){
                this.recurrenceField = new Ext.ensible.cal.RecurrenceField({
                    name: Ext.ensible.cal.EventMappings.RRule.name,
                    fieldLabel: this.repeatsLabelText,
                    anchor: '100%'
                });
                leftFields.splice(2, 0, this.recurrenceField);
            }

            if(this.calendarStore){
                this.calendarField = new Ext.ensible.cal.CalendarCombo({
                    store: this.calendarStore,
                    fieldLabel: this.calendarLabelText,
                    name: Ext.ensible.cal.EventMappings.CalendarId.name
                });
                leftFields.splice(2, 0, this.calendarField);
            };

            this.items = [{
                id: this.id+'-left-col',
                columnWidth: this.colWidthLeft,
                layout: 'form',
                border: false,
                items: leftFields
            },{
                id: this.id+'-right-col',
                columnWidth: this.colWidthRight,
                layout: 'form',
                labelWidth: this.labelWidthRightCol || this.labelWidth,
                border: false,
                items: rightFields
            }];

            this.fbar = [{
                text:this.saveButtonText, scope: this, handler: this.onSave
            },{
                cls:'ext-del-btn', text:this.deleteButtonText, scope:this, handler:this.onDelete
            },{
                text:this.cancelButtonText, scope: this, handler: this.onCancel
            }];

            Ext.ensible.cal.EventEditForm.superclass.initComponent.call(this);
        },

        // private
        onDateChange: function(dateRangeField, val){
            if(this.recurrenceField){
                this.recurrenceField.setStartDate(val[0]);
            }
        },

        // inherited docs
        loadRecord: function(rec){
            this.form.reset().loadRecord.apply(this.form, arguments);
            this.activeRecord = rec;
            this.dateRangeField.setValue(rec.data);

            if(this.recurrenceField){
                this.recurrenceField.setStartDate(rec.data[Ext.ensible.cal.EventMappings.StartDate.name]);
            }
            if(this.calendarStore){
                this.form.setValues({'calendar': rec.data[Ext.ensible.cal.EventMappings.CalendarId.name]});
            }

            //this.isAdd = !!rec.data[Ext.ensible.cal.EventMappings.IsNew.name];
            if(rec.phantom){
                //rec.markDirty();
                this.setTitle(this.titleTextAdd);
                Ext.select('.ext-del-btn').setDisplayed(false);
            }
            else {
                this.setTitle(this.titleTextEdit);
                Ext.select('.ext-del-btn').setDisplayed(true);
            }
            this.titleField.focus();
        },

        // inherited docs
        updateRecord: function(){
            var dates = this.dateRangeField.getValue(),
                M = Ext.ensible.cal.EventMappings,
                rec = this.activeRecord,
                fs = rec.fields,
                dirty = false;

            rec.beginEdit();

            //TODO: This block is copied directly from BasicForm.updateRecord.
            // Unfortunately since that method internally calls begin/endEdit all
            // updates happen and the record dirty status is reset internally to
            // that call. We need the dirty status, plus currently the DateRangeField
            // does not map directly to the record values, so for now we'll duplicate
            // the setter logic here (we need to be able to pick up any custom-added
            // fields generically). Need to revisit this later and come up with a better solution.
            fs.each(function(f){
                var field = this.form.findField(f.name);
                if(field){
                    var value = field.getValue();
                    if (value.getGroupValue) {
                        value = value.getGroupValue();
                    }
                    else if (field.eachItem) {
                        value = [];
                        field.eachItem(function(item){
                            value.push(item.getValue());
                        });
                    }
                    rec.set(f.name, value);
                }
            }, this);

            rec.set(M.StartDate.name, dates[0]);
            rec.set(M.EndDate.name, dates[1]);
            rec.set(M.IsAllDay.name, dates[2]);

            dirty = rec.dirty;
            //delete rec.store; // make sure the record does not try to autosave
            rec.endEdit();

            return dirty;
        },

        // private
        onCancel: function(){
            this.cleanup(true);
            this.fireEvent('eventcancel', this, this.activeRecord);
        },

        // private
        cleanup: function(hide){
            if(this.activeRecord){
                this.activeRecord.reject();
            }
            delete this.activeRecord;

            if(this.form.isDirty()){
                this.form.reset();
            }
        },

        // private
        onSave: function(){
            if(!this.form.isValid()){
                return;
            }
            if(!this.updateRecord()){
                this.onCancel();
                return;
            }
            this.fireEvent(this.activeRecord.phantom ? 'eventadd' : 'eventupdate', this, this.activeRecord);
        },

        // private
        onDelete: function(){
            this.fireEvent('eventdelete', this, this.activeRecord);
        }
    });

    Ext.reg('extensible.eventeditform', Ext.ensible.cal.EventEditForm);