/*!
 * 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);