3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class Ext.calendar.EventEditForm
9 * @extends Ext.form.FormPanel
10 * <p>A custom form used for detailed editing of events.</p>
11 * <p>This is pretty much a standard form that is simply pre-configured for the options needed by the
12 * calendar components. It is also configured to automatically bind records of type {@link Ext.calendar.EventRecord}
13 * to and from the form.</p>
14 * <p>This form also provides custom events specific to the calendar so that other calendar components can be easily
15 * notified when an event has been edited via this component.</p>
16 * <p>The default configs are as follows:</p><pre><code>
19 titleTextAdd: 'Add Event',
20 titleTextEdit: 'Edit Event',
21 bodyStyle: 'background:transparent;padding:20px 20px 10px;',
23 buttonAlign: 'center',
25 cls: 'ext-evt-edit-form',
28 * @param {Object} config The config object
30 Ext.calendar.EventEditForm = Ext.extend(Ext.form.FormPanel, {
33 titleTextAdd: 'Add Event',
34 titleTextEdit: 'Edit Event',
35 bodyStyle: 'background:transparent;padding:20px 20px 10px;',
37 buttonAlign: 'center',
39 // to allow for the notes field to autogrow
40 cls: 'ext-evt-edit-form',
42 // private properties:
47 initComponent: function() {
52 * Fires after a new event is added
53 * @param {Ext.calendar.EventEditForm} this
54 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
59 * Fires after an existing event is updated
60 * @param {Ext.calendar.EventEditForm} this
61 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
66 * Fires after an event is deleted
67 * @param {Ext.calendar.EventEditForm} this
68 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
73 * Fires after an event add/edit operation is canceled by the user and no store update took place
74 * @param {Ext.calendar.EventEditForm} this
75 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
80 this.titleField = new Ext.form.TextField({
82 name: Ext.calendar.EventMappings.Title.name,
85 this.dateRangeField = new Ext.calendar.DateRangeField({
89 this.reminderField = new Ext.calendar.ReminderField({
92 this.notesField = new Ext.form.TextArea({
94 name: Ext.calendar.EventMappings.Notes.name,
99 this.locationField = new Ext.form.TextField({
100 fieldLabel: 'Location',
101 name: Ext.calendar.EventMappings.Location.name,
104 this.urlField = new Ext.form.TextField({
105 fieldLabel: 'Web Link',
106 name: Ext.calendar.EventMappings.Url.name,
110 var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
111 rightFields = [this.notesField, this.locationField, this.urlField];
113 if (this.calendarStore) {
114 this.calendarField = new Ext.calendar.CalendarPicker({
115 store: this.calendarStore,
116 name: Ext.calendar.EventMappings.CalendarId.name
118 leftFields.splice(2, 0, this.calendarField);
145 handler: this.onDelete
150 handler: this.onCancel
153 Ext.calendar.EventEditForm.superclass.initComponent.call(this);
157 loadRecord: function(rec) {
158 this.form.loadRecord.apply(this.form, arguments);
159 this.activeRecord = rec;
160 this.dateRangeField.setValue(rec.data);
161 if (this.calendarStore) {
162 this.form.setValues({
163 'calendar': rec.data[Ext.calendar.EventMappings.CalendarId.name]
166 this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
169 this.setTitle(this.titleTextAdd);
170 Ext.select('.ext-del-btn').setDisplayed(false);
173 this.setTitle(this.titleTextEdit);
174 Ext.select('.ext-del-btn').setDisplayed(true);
176 this.titleField.focus();
180 updateRecord: function() {
181 var dates = this.dateRangeField.getValue();
183 this.form.updateRecord(this.activeRecord);
184 this.activeRecord.set(Ext.calendar.EventMappings.StartDate.name, dates[0]);
185 this.activeRecord.set(Ext.calendar.EventMappings.EndDate.name, dates[1]);
186 this.activeRecord.set(Ext.calendar.EventMappings.IsAllDay.name, dates[2]);
190 onCancel: function() {
192 this.fireEvent('eventcancel', this, this.activeRecord);
196 cleanup: function(hide) {
197 if (this.activeRecord && this.activeRecord.dirty) {
198 this.activeRecord.reject();
200 delete this.activeRecord;
202 if (this.form.isDirty()) {
209 if (!this.form.isValid()) {
214 if (!this.activeRecord.dirty) {
219 this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
223 onDelete: function() {
224 this.fireEvent('eventdelete', this, this.activeRecord);
228 Ext.reg('eventeditform', Ext.calendar.EventEditForm);