Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / docs / source / EventEditWindow.html
diff --git a/examples/docs/source/EventEditWindow.html b/examples/docs/source/EventEditWindow.html
deleted file mode 100644 (file)
index 049ce1a..0000000
+++ /dev/null
@@ -1,296 +0,0 @@
-<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.EventEditWindow"></div>/**
- * @class Ext.calendar.EventEditWindow
- * @extends Ext.Window
- * <p>A custom window containing a basic edit form used for quick editing of events.</p>
- * <p>This window 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>
- * @constructor
- * @param {Object} config The config object
- */
-Ext.calendar.EventEditWindow = function(config) {
-    var formPanelCfg = {
-        xtype: 'form',
-        labelWidth: 65,
-        frame: false,
-        bodyStyle: 'background:transparent;padding:5px 10px 10px;',
-        bodyBorder: false,
-        border: false,
-        items: [{
-            id: 'title',
-            name: Ext.calendar.EventMappings.Title.name,
-            fieldLabel: 'Title',
-            xtype: 'textfield',
-            anchor: '100%'
-        },
-        {
-            xtype: 'daterangefield',
-            id: 'date-range',
-            anchor: '100%',
-            fieldLabel: 'When'
-        }]
-    };
-
-    if (config.calendarStore) {
-        this.calendarStore = config.calendarStore;
-        delete config.calendarStore;
-
-        formPanelCfg.items.push({
-            xtype: 'calendarpicker',
-            id: 'calendar',
-            name: 'calendar',
-            anchor: '100%',
-            store: this.calendarStore
-        });
-    }
-
-    Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({
-        titleTextAdd: 'Add Event',
-        titleTextEdit: 'Edit Event',
-        width: 600,
-        autocreate: true,
-        border: true,
-        closeAction: 'hide',
-        modal: false,
-        resizable: false,
-        buttonAlign: 'left',
-        savingMessage: 'Saving changes...',
-        deletingMessage: 'Deleting event...',
-
-        fbar: [{
-            xtype: 'tbtext',
-            text: '<a href="#" id="tblink">Edit Details...</a>'
-        },
-        '->', {
-            text: 'Save',
-            disabled: false,
-            handler: this.onSave,
-            scope: this
-        },
-        {
-            id: 'delete-btn',
-            text: 'Delete',
-            disabled: false,
-            handler: this.onDelete,
-            scope: this,
-            hideMode: 'offsets'
-        },
-        {
-            text: 'Cancel',
-            disabled: false,
-            handler: this.onCancel,
-            scope: this
-        }],
-        items: formPanelCfg
-    },
-    config));
-};
-
-Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, {
-    // private
-    newId: 10000,
-
-    // private
-    initComponent: function() {
-        Ext.calendar.EventEditWindow.superclass.initComponent.call(this);
-
-        this.formPanel = this.items.items[0];
-
-        this.addEvents({
-            <div id="event-Ext.calendar.EventEditWindow-eventadd"></div>/**
-             * @event eventadd
-             * Fires after a new event is added
-             * @param {Ext.calendar.EventEditWindow} this
-             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
-             */
-            eventadd: true,
-            <div id="event-Ext.calendar.EventEditWindow-eventupdate"></div>/**
-             * @event eventupdate
-             * Fires after an existing event is updated
-             * @param {Ext.calendar.EventEditWindow} this
-             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
-             */
-            eventupdate: true,
-            <div id="event-Ext.calendar.EventEditWindow-eventdelete"></div>/**
-             * @event eventdelete
-             * Fires after an event is deleted
-             * @param {Ext.calendar.EventEditWindow} this
-             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
-             */
-            eventdelete: true,
-            <div id="event-Ext.calendar.EventEditWindow-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.EventEditWindow} this
-             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
-             */
-            eventcancel: true,
-            <div id="event-Ext.calendar.EventEditWindow-editdetails"></div>/**
-             * @event editdetails
-             * Fires when the user selects the option in this window to continue editing in the detailed edit form
-             * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window
-             * and transfer the current event record to the appropriate instance of the detailed form by showing it
-             * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}.
-             * @param {Ext.calendar.EventEditWindow} this
-             * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited
-             */
-            editdetails: true
-        });
-    },
-
-    // private
-    afterRender: function() {
-        Ext.calendar.EventEditWindow.superclass.afterRender.call(this);
-
-        this.el.addClass('ext-cal-event-win');
-
-        Ext.get('tblink').on('click',
-        function(e) {
-            e.stopEvent();
-            this.updateRecord();
-            this.fireEvent('editdetails', this, this.activeRecord);
-        },
-        this);
-    },
-
-    <div id="method-Ext.calendar.EventEditWindow-show"></div>/**
-     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
-        * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form
-        * for an existing event in edit mode, or a plain object containing a StartDate property (and 
-        * optionally an EndDate property) for showing the form in add mode. 
-     * @param {String/Element} animateTarget (optional) The target element or id from which the window should
-     * animate while opening (defaults to null with no animation)
-     * @return {Ext.Window} this
-     */
-    show: function(o, animateTarget) {
-        // Work around the CSS day cell height hack needed for initial render in IE8/strict:
-        var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget;
-
-        Ext.calendar.EventEditWindow.superclass.show.call(this, anim,
-        function() {
-            Ext.getCmp('title').focus(false, 100);
-        });
-        Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide']();
-
-        var rec,
-        f = this.formPanel.form;
-
-        if (o.data) {
-            rec = o;
-            this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
-            if (this.isAdd) {
-                // Enable adding the default record that was passed in
-                // if it's new even if the user makes no changes
-                rec.markDirty();
-                this.setTitle(this.titleTextAdd);
-            }
-            else {
-                this.setTitle(this.titleTextEdit);
-            }
-
-            f.loadRecord(rec);
-        }
-        else {
-            this.isAdd = true;
-            this.setTitle(this.titleTextAdd);
-
-            var M = Ext.calendar.EventMappings,
-            eventId = M.EventId.name,
-            start = o[M.StartDate.name],
-            end = o[M.EndDate.name] || start.add('h', 1);
-
-            rec = new Ext.calendar.EventRecord();
-            rec.data[M.EventId.name] = this.newId++;
-            rec.data[M.StartDate.name] = start;
-            rec.data[M.EndDate.name] = end;
-            rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate();
-            rec.data[M.IsNew.name] = true;
-
-            f.reset();
-            f.loadRecord(rec);
-        }
-
-        if (this.calendarStore) {
-            Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]);
-        }
-        Ext.getCmp('date-range').setValue(rec.data);
-        this.activeRecord = rec;
-
-        return this;
-    },
-
-    // private
-    roundTime: function(dt, incr) {
-        incr = incr || 15;
-        var m = parseInt(dt.getMinutes(), 10);
-        return dt.add('mi', incr - (m % incr));
-    },
-
-    // private
-    onCancel: function() {
-        this.cleanup(true);
-        this.fireEvent('eventcancel', this);
-    },
-
-    // private
-    cleanup: function(hide) {
-        if (this.activeRecord && this.activeRecord.dirty) {
-            this.activeRecord.reject();
-        }
-        delete this.activeRecord;
-
-        if (hide === true) {
-            // Work around the CSS day cell height hack needed for initial render in IE8/strict:
-            //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;
-            this.hide();
-        }
-    },
-
-    // private
-    updateRecord: function() {
-        var f = this.formPanel.form,
-        dates = Ext.getCmp('date-range').getValue(),
-        M = Ext.calendar.EventMappings;
-
-        f.updateRecord(this.activeRecord);
-        this.activeRecord.set(M.StartDate.name, dates[0]);
-        this.activeRecord.set(M.EndDate.name, dates[1]);
-        this.activeRecord.set(M.IsAllDay.name, dates[2]);
-        this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue());
-    },
-
-    // private
-    onSave: function() {
-        if (!this.formPanel.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);
-    }
-});</pre>    
-</body>
-</html>
\ No newline at end of file