X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/docs/source/EventEditForm.html?ds=sidebyside diff --git a/examples/docs/source/EventEditForm.html b/examples/docs/source/EventEditForm.html new file mode 100644 index 00000000..2e04488d --- /dev/null +++ b/examples/docs/source/EventEditForm.html @@ -0,0 +1,239 @@ + +
+ +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.calendar.EventEditForm + * @extends Ext.form.FormPanel + *+ + \ No newline at end of fileA 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:
+ * @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); ++ 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', +