examples/docs/source/EventEditWindow.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.EventEditWindow"></div>/**
  16  * @class Ext.calendar.EventEditWindow
  17  * @extends Ext.Window
  18  * <p>A custom window containing a basic edit form used for quick editing of events.</p>
  19  * <p>This window also provides custom events specific to the calendar so that other calendar components can be easily
  20  * notified when an event has been edited via this component.</p>
  21  * @constructor
  22  * @param {Object} config The config object
  23  */
  24 Ext.calendar.EventEditWindow = function(config) {
  25     var formPanelCfg = {
  26         xtype: 'form',
  27         labelWidth: 65,
  28         frame: false,
  29         bodyStyle: 'background:transparent;padding:5px 10px 10px;',
  30         bodyBorder: false,
  31         border: false,
  32         items: [{
  33             id: 'title',
  34             name: Ext.calendar.EventMappings.Title.name,
  35             fieldLabel: 'Title',
  36             xtype: 'textfield',
  37             anchor: '100%'
  38         },
  39         {
  40             xtype: 'daterangefield',
  41             id: 'date-range',
  42             anchor: '100%',
  43             fieldLabel: 'When'
  44         }]
  45     };
  46
  47     if (config.calendarStore) {
  48         this.calendarStore = config.calendarStore;
  49         delete config.calendarStore;
  50
  51         formPanelCfg.items.push({
  52             xtype: 'calendarpicker',
  53             id: 'calendar',
  54             name: 'calendar',
  55             anchor: '100%',
  56             store: this.calendarStore
  57         });
  58     }
  59
  60     Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({
  61         titleTextAdd: 'Add Event',
  62         titleTextEdit: 'Edit Event',
  63         width: 600,
  64         autocreate: true,
  65         border: true,
  66         closeAction: 'hide',
  67         modal: false,
  68         resizable: false,
  69         buttonAlign: 'left',
  70         savingMessage: 'Saving changes...',
  71         deletingMessage: 'Deleting event...',
  72
  73         fbar: [{
  74             xtype: 'tbtext',
  75             text: '<a href="#" id="tblink">Edit Details...</a>'
  76         },
  77         '->', {
  78             text: 'Save',
  79             disabled: false,
  80             handler: this.onSave,
  81             scope: this
  82         },
  83         {
  84             id: 'delete-btn',
  85             text: 'Delete',
  86             disabled: false,
  87             handler: this.onDelete,
  88             scope: this,
  89             hideMode: 'offsets'
  90         },
  91         {
  92             text: 'Cancel',
  93             disabled: false,
  94             handler: this.onCancel,
  95             scope: this
  96         }],
  97         items: formPanelCfg
  98     },
  99     config));
 100 };
 101
 102 Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, {
 103     // private
 104     newId: 10000,
 105
 106     // private
 107     initComponent: function() {
 108         Ext.calendar.EventEditWindow.superclass.initComponent.call(this);
 109
 110         this.formPanel = this.items.items[0];
 111
 112         this.addEvents({
 113             <div id="event-Ext.calendar.EventEditWindow-eventadd"></div>/**
 114              * @event eventadd
 115              * Fires after a new event is added
 116              * @param {Ext.calendar.EventEditWindow} this
 117              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
 118              */
 119             eventadd: true,
 120             <div id="event-Ext.calendar.EventEditWindow-eventupdate"></div>/**
 121              * @event eventupdate
 122              * Fires after an existing event is updated
 123              * @param {Ext.calendar.EventEditWindow} this
 124              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
 125              */
 126             eventupdate: true,
 127             <div id="event-Ext.calendar.EventEditWindow-eventdelete"></div>/**
 128              * @event eventdelete
 129              * Fires after an event is deleted
 130              * @param {Ext.calendar.EventEditWindow} this
 131              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
 132              */
 133             eventdelete: true,
 134             <div id="event-Ext.calendar.EventEditWindow-eventcancel"></div>/**
 135              * @event eventcancel
 136              * Fires after an event add/edit operation is canceled by the user and no store update took place
 137              * @param {Ext.calendar.EventEditWindow} this
 138              * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
 139              */
 140             eventcancel: true,
 141             <div id="event-Ext.calendar.EventEditWindow-editdetails"></div>/**
 142              * @event editdetails
 143              * Fires when the user selects the option in this window to continue editing in the detailed edit form
 144              * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window
 145              * and transfer the current event record to the appropriate instance of the detailed form by showing it
 146              * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}.
 147              * @param {Ext.calendar.EventEditWindow} this
 148              * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited
 149              */
 150             editdetails: true
 151         });
 152     },
 153
 154     // private
 155     afterRender: function() {
 156         Ext.calendar.EventEditWindow.superclass.afterRender.call(this);
 157
 158         this.el.addClass('ext-cal-event-win');
 159
 160         Ext.get('tblink').on('click',
 161         function(e) {
 162             e.stopEvent();
 163             this.updateRecord();
 164             this.fireEvent('editdetails', this, this.activeRecord);
 165         },
 166         this);
 167     },
 168
 169     <div id="method-Ext.calendar.EventEditWindow-show"></div>/**
 170      * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
 171          * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form
 172          * for an existing event in edit mode, or a plain object containing a StartDate property (and
 173          * optionally an EndDate property) for showing the form in add mode.
 174      * @param {String/Element} animateTarget (optional) The target element or id from which the window should
 175      * animate while opening (defaults to null with no animation)
 176      * @return {Ext.Window} this
 177      */
 178     show: function(o, animateTarget) {
 179         // Work around the CSS day cell height hack needed for initial render in IE8/strict:
 180         var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget;
 181
 182         Ext.calendar.EventEditWindow.superclass.show.call(this, anim,
 183         function() {
 184             Ext.getCmp('title').focus(false, 100);
 185         });
 186         Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide']();
 187
 188         var rec,
 189         f = this.formPanel.form;
 190
 191         if (o.data) {
 192             rec = o;
 193             this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
 194             if (this.isAdd) {
 195                 // Enable adding the default record that was passed in
 196                 // if it's new even if the user makes no changes
 197                 rec.markDirty();
 198                 this.setTitle(this.titleTextAdd);
 199             }
 200             else {
 201                 this.setTitle(this.titleTextEdit);
 202             }
 203
 204             f.loadRecord(rec);
 205         }
 206         else {
 207             this.isAdd = true;
 208             this.setTitle(this.titleTextAdd);
 209
 210             var M = Ext.calendar.EventMappings,
 211             eventId = M.EventId.name,
 212             start = o[M.StartDate.name],
 213             end = o[M.EndDate.name] || start.add('h', 1);
 214
 215             rec = new Ext.calendar.EventRecord();
 216             rec.data[M.EventId.name] = this.newId++;
 217             rec.data[M.StartDate.name] = start;
 218             rec.data[M.EndDate.name] = end;
 219             rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate();
 220             rec.data[M.IsNew.name] = true;
 221
 222             f.reset();
 223             f.loadRecord(rec);
 224         }
 225
 226         if (this.calendarStore) {
 227             Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]);
 228         }
 229         Ext.getCmp('date-range').setValue(rec.data);
 230         this.activeRecord = rec;
 231
 232         return this;
 233     },
 234
 235     // private
 236     roundTime: function(dt, incr) {
 237         incr = incr || 15;
 238         var m = parseInt(dt.getMinutes(), 10);
 239         return dt.add('mi', incr - (m % incr));
 240     },
 241
 242     // private
 243     onCancel: function() {
 244         this.cleanup(true);
 245         this.fireEvent('eventcancel', this);
 246     },
 247
 248     // private
 249     cleanup: function(hide) {
 250         if (this.activeRecord && this.activeRecord.dirty) {
 251             this.activeRecord.reject();
 252         }
 253         delete this.activeRecord;
 254
 255         if (hide === true) {
 256             // Work around the CSS day cell height hack needed for initial render in IE8/strict:
 257             //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;
 258             this.hide();
 259         }
 260     },
 261
 262     // private
 263     updateRecord: function() {
 264         var f = this.formPanel.form,
 265         dates = Ext.getCmp('date-range').getValue(),
 266         M = Ext.calendar.EventMappings;
 267
 268         f.updateRecord(this.activeRecord);
 269         this.activeRecord.set(M.StartDate.name, dates[0]);
 270         this.activeRecord.set(M.EndDate.name, dates[1]);
 271         this.activeRecord.set(M.IsAllDay.name, dates[2]);
 272         this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue());
 273     },
 274
 275     // private
 276     onSave: function() {
 277         if (!this.formPanel.form.isValid()) {
 278             return;
 279         }
 280         this.updateRecord();
 281
 282         if (!this.activeRecord.dirty) {
 283             this.onCancel();
 284             return;
 285         }
 286
 287         this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
 288     },
 289
 290     // private
 291     onDelete: function() {
 292         this.fireEvent('eventdelete', this, this.activeRecord);
 293     }
 294 });</pre>
 295 </body>
 296 </html>