--- /dev/null
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body onload="prettyPrint();">
+ <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.calendar.EventEditForm"></div>/**
+ * @class Ext.calendar.EventEditForm
+ * @extends Ext.form.FormPanel
+ * <p>A custom form used for detailed editing of events.</p>
+ * <p>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.</p>
+ * <p>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.</p>
+ * <p>The default configs are as follows:</p><pre><code>
+ 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',
+</code></pre>
+ * @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({
+ <div id="event-Ext.calendar.EventEditForm-eventadd"></div>/**
+ * @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,
+ <div id="event-Ext.calendar.EventEditForm-eventupdate"></div>/**
+ * @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,
+ <div id="event-Ext.calendar.EventEditForm-eventdelete"></div>/**
+ * @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,
+ <div id="event-Ext.calendar.EventEditForm-eventcancel"></div>/**
+ * @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);
+</pre>
+</body>
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff