examples/docs/source/EventEditForm.html

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