A custom window containing a basic edit form used for quick editing of events.
- *This window 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.
- * @constructor - * @param {Object} config The config object - */ -Ext.calendar.EventEditWindow = function(config) { - var formPanelCfg = { - xtype: 'form', - labelWidth: 65, - frame: false, - bodyStyle: 'background:transparent;padding:5px 10px 10px;', - bodyBorder: false, - border: false, - items: [{ - id: 'title', - name: Ext.calendar.EventMappings.Title.name, - fieldLabel: 'Title', - xtype: 'textfield', - anchor: '100%' - }, - { - xtype: 'daterangefield', - id: 'date-range', - anchor: '100%', - fieldLabel: 'When' - }] - }; - - if (config.calendarStore) { - this.calendarStore = config.calendarStore; - delete config.calendarStore; - - formPanelCfg.items.push({ - xtype: 'calendarpicker', - id: 'calendar', - name: 'calendar', - anchor: '100%', - store: this.calendarStore - }); - } - - Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({ - titleTextAdd: 'Add Event', - titleTextEdit: 'Edit Event', - width: 600, - autocreate: true, - border: true, - closeAction: 'hide', - modal: false, - resizable: false, - buttonAlign: 'left', - savingMessage: 'Saving changes...', - deletingMessage: 'Deleting event...', - - fbar: [{ - xtype: 'tbtext', - text: 'Edit Details...' - }, - '->', { - text: 'Save', - disabled: false, - handler: this.onSave, - scope: this - }, - { - id: 'delete-btn', - text: 'Delete', - disabled: false, - handler: this.onDelete, - scope: this, - hideMode: 'offsets' - }, - { - text: 'Cancel', - disabled: false, - handler: this.onCancel, - scope: this - }], - items: formPanelCfg - }, - config)); -}; - -Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, { - // private - newId: 10000, - - // private - initComponent: function() { - Ext.calendar.EventEditWindow.superclass.initComponent.call(this); - - this.formPanel = this.items.items[0]; - - this.addEvents({ - /** - * @event eventadd - * Fires after a new event is added - * @param {Ext.calendar.EventEditWindow} 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.EventEditWindow} 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.EventEditWindow} 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.EventEditWindow} this - * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled - */ - eventcancel: true, - /** - * @event editdetails - * Fires when the user selects the option in this window to continue editing in the detailed edit form - * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window - * and transfer the current event record to the appropriate instance of the detailed form by showing it - * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}. - * @param {Ext.calendar.EventEditWindow} this - * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited - */ - editdetails: true - }); - }, - - // private - afterRender: function() { - Ext.calendar.EventEditWindow.superclass.afterRender.call(this); - - this.el.addClass('ext-cal-event-win'); - - Ext.get('tblink').on('click', - function(e) { - e.stopEvent(); - this.updateRecord(); - this.fireEvent('editdetails', this, this.activeRecord); - }, - this); - }, - - /** - * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. - * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form - * for an existing event in edit mode, or a plain object containing a StartDate property (and - * optionally an EndDate property) for showing the form in add mode. - * @param {String/Element} animateTarget (optional) The target element or id from which the window should - * animate while opening (defaults to null with no animation) - * @return {Ext.Window} this - */ - show: function(o, animateTarget) { - // Work around the CSS day cell height hack needed for initial render in IE8/strict: - var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget; - - Ext.calendar.EventEditWindow.superclass.show.call(this, anim, - function() { - Ext.getCmp('title').focus(false, 100); - }); - Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide'](); - - var rec, - f = this.formPanel.form; - - if (o.data) { - rec = o; - this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name]; - if (this.isAdd) { - // Enable adding the default record that was passed in - // if it's new even if the user makes no changes - rec.markDirty(); - this.setTitle(this.titleTextAdd); - } - else { - this.setTitle(this.titleTextEdit); - } - - f.loadRecord(rec); - } - else { - this.isAdd = true; - this.setTitle(this.titleTextAdd); - - var M = Ext.calendar.EventMappings, - eventId = M.EventId.name, - start = o[M.StartDate.name], - end = o[M.EndDate.name] || start.add('h', 1); - - rec = new Ext.calendar.EventRecord(); - rec.data[M.EventId.name] = this.newId++; - rec.data[M.StartDate.name] = start; - rec.data[M.EndDate.name] = end; - rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate(); - rec.data[M.IsNew.name] = true; - - f.reset(); - f.loadRecord(rec); - } - - if (this.calendarStore) { - Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]); - } - Ext.getCmp('date-range').setValue(rec.data); - this.activeRecord = rec; - - return this; - }, - - // private - roundTime: function(dt, incr) { - incr = incr || 15; - var m = parseInt(dt.getMinutes(), 10); - return dt.add('mi', incr - (m % incr)); - }, - - // private - onCancel: function() { - this.cleanup(true); - this.fireEvent('eventcancel', this); - }, - - // private - cleanup: function(hide) { - if (this.activeRecord && this.activeRecord.dirty) { - this.activeRecord.reject(); - } - delete this.activeRecord; - - if (hide === true) { - // Work around the CSS day cell height hack needed for initial render in IE8/strict: - //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget; - this.hide(); - } - }, - - // private - updateRecord: function() { - var f = this.formPanel.form, - dates = Ext.getCmp('date-range').getValue(), - M = Ext.calendar.EventMappings; - - f.updateRecord(this.activeRecord); - this.activeRecord.set(M.StartDate.name, dates[0]); - this.activeRecord.set(M.EndDate.name, dates[1]); - this.activeRecord.set(M.IsAllDay.name, dates[2]); - this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue()); - }, - - // private - onSave: function() { - if (!this.formPanel.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); - } -}); \ No newline at end of file