3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.calendar.EventEditWindow
10 * <p>A custom window containing a basic edit form used for quick editing of events.</p>
11 * <p>This window also provides custom events specific to the calendar so that other calendar components can be easily
12 * notified when an event has been edited via this component.</p>
14 * @param {Object} config The config object
16 Ext.calendar.EventEditWindow = function(config) {
21 bodyStyle: 'background:transparent;padding:5px 10px 10px;',
26 name: Ext.calendar.EventMappings.Title.name,
32 xtype: 'daterangefield',
39 if (config.calendarStore) {
40 this.calendarStore = config.calendarStore;
41 delete config.calendarStore;
43 formPanelCfg.items.push({
44 xtype: 'calendarpicker',
48 store: this.calendarStore
52 Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({
53 titleTextAdd: 'Add Event',
54 titleTextEdit: 'Edit Event',
62 savingMessage: 'Saving changes...',
63 deletingMessage: 'Deleting event...',
67 text: '<a href="#" id="tblink">Edit Details...</a>'
79 handler: this.onDelete,
86 handler: this.onCancel,
94 Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, {
99 initComponent: function() {
100 Ext.calendar.EventEditWindow.superclass.initComponent.call(this);
102 this.formPanel = this.items.items[0];
107 * Fires after a new event is added
108 * @param {Ext.calendar.EventEditWindow} this
109 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
114 * Fires after an existing event is updated
115 * @param {Ext.calendar.EventEditWindow} this
116 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
121 * Fires after an event is deleted
122 * @param {Ext.calendar.EventEditWindow} this
123 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
128 * Fires after an event add/edit operation is canceled by the user and no store update took place
129 * @param {Ext.calendar.EventEditWindow} this
130 * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
135 * Fires when the user selects the option in this window to continue editing in the detailed edit form
136 * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window
137 * and transfer the current event record to the appropriate instance of the detailed form by showing it
138 * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}.
139 * @param {Ext.calendar.EventEditWindow} this
140 * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited
147 afterRender: function() {
148 Ext.calendar.EventEditWindow.superclass.afterRender.call(this);
150 this.el.addClass('ext-cal-event-win');
152 Ext.get('tblink').on('click',
156 this.fireEvent('editdetails', this, this.activeRecord);
162 * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
163 * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form
164 * for an existing event in edit mode, or a plain object containing a StartDate property (and
165 * optionally an EndDate property) for showing the form in add mode.
166 * @param {String/Element} animateTarget (optional) The target element or id from which the window should
167 * animate while opening (defaults to null with no animation)
168 * @return {Ext.Window} this
170 show: function(o, animateTarget) {
171 // Work around the CSS day cell height hack needed for initial render in IE8/strict:
172 var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget;
174 Ext.calendar.EventEditWindow.superclass.show.call(this, anim,
176 Ext.getCmp('title').focus(false, 100);
178 Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide']();
181 f = this.formPanel.form;
185 this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
187 // Enable adding the default record that was passed in
188 // if it's new even if the user makes no changes
190 this.setTitle(this.titleTextAdd);
193 this.setTitle(this.titleTextEdit);
200 this.setTitle(this.titleTextAdd);
202 var M = Ext.calendar.EventMappings,
203 eventId = M.EventId.name,
204 start = o[M.StartDate.name],
205 end = o[M.EndDate.name] || start.add('h', 1);
207 rec = new Ext.calendar.EventRecord();
208 rec.data[M.EventId.name] = this.newId++;
209 rec.data[M.StartDate.name] = start;
210 rec.data[M.EndDate.name] = end;
211 rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate();
212 rec.data[M.IsNew.name] = true;
218 if (this.calendarStore) {
219 Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]);
221 Ext.getCmp('date-range').setValue(rec.data);
222 this.activeRecord = rec;
228 roundTime: function(dt, incr) {
230 var m = parseInt(dt.getMinutes(), 10);
231 return dt.add('mi', incr - (m % incr));
235 onCancel: function() {
237 this.fireEvent('eventcancel', this);
241 cleanup: function(hide) {
242 if (this.activeRecord && this.activeRecord.dirty) {
243 this.activeRecord.reject();
245 delete this.activeRecord;
248 // Work around the CSS day cell height hack needed for initial render in IE8/strict:
249 //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;
255 updateRecord: function() {
256 var f = this.formPanel.form,
257 dates = Ext.getCmp('date-range').getValue(),
258 M = Ext.calendar.EventMappings;
260 f.updateRecord(this.activeRecord);
261 this.activeRecord.set(M.StartDate.name, dates[0]);
262 this.activeRecord.set(M.EndDate.name, dates[1]);
263 this.activeRecord.set(M.IsAllDay.name, dates[2]);
264 this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue());
269 if (!this.formPanel.form.isValid()) {
274 if (!this.activeRecord.dirty) {
279 this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
283 onDelete: function() {
284 this.fireEvent('eventdelete', this, this.activeRecord);