X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/calendar/src/EventEditForm.js?ds=sidebyside diff --git a/examples/calendar/src/EventEditForm.js b/examples/calendar/src/EventEditForm.js deleted file mode 100644 index b97cbbda..00000000 --- a/examples/calendar/src/EventEditForm.js +++ /dev/null @@ -1,228 +0,0 @@ -/*! - * 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);