The source code

    /*!
     * Ext JS Library 3.3.1
     * Copyright(c) 2006-2010 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    /**
     * @class Ext.calendar.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.calendar.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,
        title: 'Event Form',
        titleTextAdd: 'Add Event',
        titleTextEdit: 'Edit Event',
        bodyStyle: 'background:transparent;padding:20px 20px 10px;',
        border: false,
        buttonAlign: 'center',
        autoHeight: true,
        cls: 'ext-evt-edit-form',

     * @constructor
     * @param {Object} config The config object
     */
    Ext.calendar.EventEditForm = Ext.extend(Ext.form.FormPanel, {
        labelWidth: 65,
        title: 'Event Form',
        titleTextAdd: 'Add Event',
        titleTextEdit: 'Edit Event',
        bodyStyle: 'background:transparent;padding:20px 20px 10px;',
        border: false,
        buttonAlign: 'center',
        autoHeight: true,
        // to allow for the notes field to autogrow
        cls: 'ext-evt-edit-form',

        // private properties:
        newId: 10000,
        layout: 'column',

        // private
        initComponent: function() {

            this.addEvents({
                /**
                 * @event eventadd
                 * Fires after a new event is added
                 * @param {Ext.calendar.EventEditForm} this
                 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
                 */
                eventadd: true,
                /**
                 * @event eventupdate
                 * Fires after an existing event is updated
                 * @param {Ext.calendar.EventEditForm} this
                 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
                 */
                eventupdate: true,
                /**
                 * @event eventdelete
                 * Fires after an event is deleted
                 * @param {Ext.calendar.EventEditForm} this
                 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.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.calendar.EventEditForm} this
                 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
                 */
                eventcancel: true
            });

            this.titleField = new Ext.form.TextField({
                fieldLabel: 'Title',
                name: Ext.calendar.EventMappings.Title.name,
                anchor: '90%'
            });
            this.dateRangeField = new Ext.calendar.DateRangeField({
                fieldLabel: 'When',
                anchor: '90%'
            });
            this.reminderField = new Ext.calendar.ReminderField({
                name: 'Reminder'
            });
            this.notesField = new Ext.form.TextArea({
                fieldLabel: 'Notes',
                name: Ext.calendar.EventMappings.Notes.name,
                grow: true,
                growMax: 150,
                anchor: '100%'
            });
            this.locationField = new Ext.form.TextField({
                fieldLabel: 'Location',
                name: Ext.calendar.EventMappings.Location.name,
                anchor: '100%'
            });
            this.urlField = new Ext.form.TextField({
                fieldLabel: 'Web Link',
                name: Ext.calendar.EventMappings.Url.name,
                anchor: '100%'
            });

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

            if (this.calendarStore) {
                this.calendarField = new Ext.calendar.CalendarPicker({
                    store: this.calendarStore,
                    name: Ext.calendar.EventMappings.CalendarId.name
                });
                leftFields.splice(2, 0, this.calendarField);
            };

            this.items = [{
                id: 'left-col',
                columnWidth: 0.65,
                layout: 'form',
                border: false,
                items: leftFields
            },
            {
                id: 'right-col',
                columnWidth: 0.35,
                layout: 'form',
                border: false,
                items: rightFields
            }];

            this.fbar = [{
                text: 'Save',
                scope: this,
                handler: this.onSave
            },
            {
                cls: 'ext-del-btn',
                text: 'Delete',
                scope: this,
                handler: this.onDelete
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.onCancel
            }];

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

        // inherited docs
        loadRecord: function(rec) {
            this.form.loadRecord.apply(this.form, arguments);
            this.activeRecord = rec;
            this.dateRangeField.setValue(rec.data);
            if (this.calendarStore) {
                this.form.setValues({
                    'calendar': rec.data[Ext.calendar.EventMappings.CalendarId.name]
                });
            }
            this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
            if (this.isAdd) {
                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();

            this.form.updateRecord(this.activeRecord);
            this.activeRecord.set(Ext.calendar.EventMappings.StartDate.name, dates[0]);
            this.activeRecord.set(Ext.calendar.EventMappings.EndDate.name, dates[1]);
            this.activeRecord.set(Ext.calendar.EventMappings.IsAllDay.name, dates[2]);
        },

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

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

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

        // private
        onSave: function() {
            if (!this.form.isValid()) {
                return;
            }
            this.updateRecord();

            if (!this.activeRecord.dirty) {
                this.onCancel();
                return;
            }

            this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
        },

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

    Ext.reg('eventeditform', Ext.calendar.EventEditForm);