examples/calendar/src/EventEditForm.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.calendar.EventEditForm
   9  * @extends Ext.form.FormPanel
  10  * <p>A custom form used for detailed editing of events.</p>
  11  * <p>This is pretty much a standard form that is simply pre-configured for the options needed by the
  12  * calendar components. It is also configured to automatically bind records of type {@link Ext.calendar.EventRecord}
  13  * to and from the form.</p>
  14  * <p>This form also provides custom events specific to the calendar so that other calendar components can be easily
  15  * notified when an event has been edited via this component.</p>
  16  * <p>The default configs are as follows:</p><pre><code>
  17     labelWidth: 65,
  18     title: 'Event Form',
  19     titleTextAdd: 'Add Event',
  20     titleTextEdit: 'Edit Event',
  21     bodyStyle: 'background:transparent;padding:20px 20px 10px;',
  22     border: false,
  23     buttonAlign: 'center',
  24     autoHeight: true,
  25     cls: 'ext-evt-edit-form',
  26 </code></pre>
  27  * @constructor
  28  * @param {Object} config The config object
  29  */
  30 Ext.calendar.EventEditForm = Ext.extend(Ext.form.FormPanel, {
  31     labelWidth: 65,
  32     title: 'Event Form',
  33     titleTextAdd: 'Add Event',
  34     titleTextEdit: 'Edit Event',
  35     bodyStyle: 'background:transparent;padding:20px 20px 10px;',
  36     border: false,
  37     buttonAlign: 'center',
  38     autoHeight: true,
  39     // to allow for the notes field to autogrow
  40     cls: 'ext-evt-edit-form',
  41
  42     // private properties:
  43     newId: 10000,
  44     layout: 'column',
  45
  46     // private
  47     initComponent: function() {
  48
  49         this.addEvents({
  50             /**
  51              * @event eventadd
  52              * Fires after a new event is added
  53              * @param {Ext.calendar.EventEditForm} this
  54              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
  55              */
  56             eventadd: true,
  57             /**
  58              * @event eventupdate
  59              * Fires after an existing event is updated
  60              * @param {Ext.calendar.EventEditForm} this
  61              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
  62              */
  63             eventupdate: true,
  64             /**
  65              * @event eventdelete
  66              * Fires after an event is deleted
  67              * @param {Ext.calendar.EventEditForm} this
  68              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
  69              */
  70             eventdelete: true,
  71             /**
  72              * @event eventcancel
  73              * Fires after an event add/edit operation is canceled by the user and no store update took place
  74              * @param {Ext.calendar.EventEditForm} this
  75              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
  76              */
  77             eventcancel: true
  78         });
  79
  80         this.titleField = new Ext.form.TextField({
  81             fieldLabel: 'Title',
  82             name: Ext.calendar.EventMappings.Title.name,
  83             anchor: '90%'
  84         });
  85         this.dateRangeField = new Ext.calendar.DateRangeField({
  86             fieldLabel: 'When',
  87             anchor: '90%'
  88         });
  89         this.reminderField = new Ext.calendar.ReminderField({
  90             name: 'Reminder'
  91         });
  92         this.notesField = new Ext.form.TextArea({
  93             fieldLabel: 'Notes',
  94             name: Ext.calendar.EventMappings.Notes.name,
  95             grow: true,
  96             growMax: 150,
  97             anchor: '100%'
  98         });
  99         this.locationField = new Ext.form.TextField({
 100             fieldLabel: 'Location',
 101             name: Ext.calendar.EventMappings.Location.name,
 102             anchor: '100%'
 103         });
 104         this.urlField = new Ext.form.TextField({
 105             fieldLabel: 'Web Link',
 106             name: Ext.calendar.EventMappings.Url.name,
 107             anchor: '100%'
 108         });
 109
 110         var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
 111         rightFields = [this.notesField, this.locationField, this.urlField];
 112
 113         if (this.calendarStore) {
 114             this.calendarField = new Ext.calendar.CalendarPicker({
 115                 store: this.calendarStore,
 116                 name: Ext.calendar.EventMappings.CalendarId.name
 117             });
 118             leftFields.splice(2, 0, this.calendarField);
 119         };
 120
 121         this.items = [{
 122             id: 'left-col',
 123             columnWidth: 0.65,
 124             layout: 'form',
 125             border: false,
 126             items: leftFields
 127         },
 128         {
 129             id: 'right-col',
 130             columnWidth: 0.35,
 131             layout: 'form',
 132             border: false,
 133             items: rightFields
 134         }];
 135
 136         this.fbar = [{
 137             text: 'Save',
 138             scope: this,
 139             handler: this.onSave
 140         },
 141         {
 142             cls: 'ext-del-btn',
 143             text: 'Delete',
 144             scope: this,
 145             handler: this.onDelete
 146         },
 147         {
 148             text: 'Cancel',
 149             scope: this,
 150             handler: this.onCancel
 151         }];
 152
 153         Ext.calendar.EventEditForm.superclass.initComponent.call(this);
 154     },
 155
 156     // inherited docs
 157     loadRecord: function(rec) {
 158         this.form.loadRecord.apply(this.form, arguments);
 159         this.activeRecord = rec;
 160         this.dateRangeField.setValue(rec.data);
 161         if (this.calendarStore) {
 162             this.form.setValues({
 163                 'calendar': rec.data[Ext.calendar.EventMappings.CalendarId.name]
 164             });
 165         }
 166         this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
 167         if (this.isAdd) {
 168             rec.markDirty();
 169             this.setTitle(this.titleTextAdd);
 170             Ext.select('.ext-del-btn').setDisplayed(false);
 171         }
 172         else {
 173             this.setTitle(this.titleTextEdit);
 174             Ext.select('.ext-del-btn').setDisplayed(true);
 175         }
 176         this.titleField.focus();
 177     },
 178
 179     // inherited docs
 180     updateRecord: function() {
 181         var dates = this.dateRangeField.getValue();
 182
 183         this.form.updateRecord(this.activeRecord);
 184         this.activeRecord.set(Ext.calendar.EventMappings.StartDate.name, dates[0]);
 185         this.activeRecord.set(Ext.calendar.EventMappings.EndDate.name, dates[1]);
 186         this.activeRecord.set(Ext.calendar.EventMappings.IsAllDay.name, dates[2]);
 187     },
 188
 189     // private
 190     onCancel: function() {
 191         this.cleanup(true);
 192         this.fireEvent('eventcancel', this, this.activeRecord);
 193     },
 194
 195     // private
 196     cleanup: function(hide) {
 197         if (this.activeRecord && this.activeRecord.dirty) {
 198             this.activeRecord.reject();
 199         }
 200         delete this.activeRecord;
 201
 202         if (this.form.isDirty()) {
 203             this.form.reset();
 204         }
 205     },
 206
 207     // private
 208     onSave: function() {
 209         if (!this.form.isValid()) {
 210             return;
 211         }
 212         this.updateRecord();
 213
 214         if (!this.activeRecord.dirty) {
 215             this.onCancel();
 216             return;
 217         }
 218
 219         this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
 220     },
 221
 222     // private
 223     onDelete: function() {
 224         this.fireEvent('eventdelete', this, this.activeRecord);
 225     }
 226 });
 227
 228 Ext.reg('eventeditform', Ext.calendar.EventEditForm);