add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / calendar / src / form / EventWindow.js

/**\r
 * @class Ext.calendar.form.EventWindow\r
 * @extends Ext.Window\r
 * <p>A custom window containing a basic edit form used for quick editing of events.</p>\r
 * <p>This window also provides custom events specific to the calendar so that other calendar components can be easily\r
 * notified when an event has been edited via this component.</p>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.form.EventWindow', {\r
    extend: 'Ext.window.Window',\r
    alias: 'widget.eventeditwindow',\r
    \r
    requires: [\r
        'Ext.form.Panel',\r
        'Ext.calendar.util.Date',\r
        'Ext.calendar.data.EventModel',\r
        'Ext.calendar.data.EventMappings'\r
    ],\r
\r
    constructor: function(config) {\r
        var formPanelCfg = {\r
            xtype: 'form',\r
            fieldDefaults: {\r
                msgTarget: 'side',\r
                labelWidth: 65\r
            },\r
            frame: false,\r
            bodyStyle: 'background:transparent;padding:5px 10px 10px;',\r
            bodyBorder: false,\r
            border: false,\r
            items: [{\r
                itemId: 'title',\r
                name: Ext.calendar.data.EventMappings.Title.name,\r
                fieldLabel: 'Title',\r
                xtype: 'textfield',\r
                allowBlank: false,\r
                emptyText: 'Event Title',\r
                anchor: '100%'\r
            },\r
            {\r
                xtype: 'daterangefield',\r
                itemId: 'date-range',\r
                name: 'dates',\r
                anchor: '100%',\r
                fieldLabel: 'When'\r
            }]\r
        };\r
    \r
        if (config.calendarStore) {\r
            this.calendarStore = config.calendarStore;\r
            delete config.calendarStore;\r
    \r
            formPanelCfg.items.push({\r
                xtype: 'calendarpicker',\r
                itemId: 'calendar',\r
                name: Ext.calendar.data.EventMappings.CalendarId.name,\r
                anchor: '100%',\r
                store: this.calendarStore\r
            });\r
        }\r
    \r
        this.callParent([Ext.apply({\r
            titleTextAdd: 'Add Event',\r
            titleTextEdit: 'Edit Event',\r
            width: 600,\r
            autocreate: true,\r
            border: true,\r
            closeAction: 'hide',\r
            modal: false,\r
            resizable: false,\r
            buttonAlign: 'left',\r
            savingMessage: 'Saving changes...',\r
            deletingMessage: 'Deleting event...',\r
            layout: 'fit',\r
    \r
            defaultFocus: 'title',\r
            onEsc: function(key, event) {\r
                        event.target.blur(); // Remove the focus to avoid doing the validity checks when the window is shown again.\r
                        this.onCancel();\r
                    },\r
\r
            fbar: [{\r
                xtype: 'tbtext',\r
                text: '<a href="#" id="tblink">Edit Details...</a>'\r
            },\r
            '->',\r
            {\r
                itemId: 'delete-btn',\r
                text: 'Delete Event',\r
                disabled: false,\r
                handler: this.onDelete,\r
                scope: this,\r
                minWidth: 150,\r
                hideMode: 'offsets'\r
            },\r
            {\r
                text: 'Save',\r
                disabled: false,\r
                handler: this.onSave,\r
                scope: this\r
            },\r
            {\r
                text: 'Cancel',\r
                disabled: false,\r
                handler: this.onCancel,\r
                scope: this\r
            }],\r
            items: formPanelCfg\r
        },\r
        config)]);\r
    },\r
\r
    // private\r
    newId: 10000,\r
\r
    /**\r
     * @event eventadd\r
     * Fires after a new event is added\r
     * @param {Ext.calendar.form.EventWindow} this\r
     * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added\r
     */\r
\r
    /**\r
     * @event eventupdate\r
     * Fires after an existing event is updated\r
     * @param {Ext.calendar.form.EventWindow} this\r
     * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated\r
     */\r
\r
    /**\r
     * @event eventdelete\r
     * Fires after an event is deleted\r
     * @param {Ext.calendar.form.EventWindow} this\r
     * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted\r
     */\r
\r
    /**\r
     * @event eventcancel\r
     * Fires after an event add/edit operation is canceled by the user and no store update took place\r
     * @param {Ext.calendar.form.EventWindow} this\r
     * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled\r
     */\r
\r
    /**\r
     * @event editdetails\r
     * Fires when the user selects the option in this window to continue editing in the detailed edit form\r
     * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window\r
     * and transfer the current event record to the appropriate instance of the detailed form by showing it\r
     * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}.\r
     * @param {Ext.calendar.form.EventWindow} this\r
     * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited\r
     */\r
\r
    // private\r
    initComponent: function() {\r
        this.callParent();\r
\r
        this.formPanel = this.items.items[0];\r
    },\r
\r
    // private\r
    afterRender: function() {\r
        this.callParent();\r
\r
        this.el.addCls('ext-cal-event-win');\r
\r
        Ext.get('tblink').on('click', this.onEditDetailsClick, this);\r
        \r
        this.titleField = this.down('#title');\r
        this.dateRangeField = this.down('#date-range');\r
        this.calendarField = this.down('#calendar');\r
        this.deleteButton = this.down('#delete-btn');\r
    },\r
    \r
    // private\r
    onEditDetailsClick: function(e){\r
        e.stopEvent();\r
        this.updateRecord(this.activeRecord, true);\r
        this.fireEvent('editdetails', this, this.activeRecord, this.animateTarget);\r
    },\r
\r
    /**\r
     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.\r
	 * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form\r
	 * for an existing event in edit mode, or a plain object containing a StartDate property (and \r
	 * optionally an EndDate property) for showing the form in add mode. \r
     * @param {String/Element} animateTarget (optional) The target element or id from which the window should\r
     * animate while opening (defaults to null with no animation)\r
     * @return {Ext.Window} this\r
     */\r
    show: function(o, animateTarget) {\r
        // Work around the CSS day cell height hack needed for initial render in IE8/strict:\r
        var me = this,\r
            anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget,\r
            M = Ext.calendar.data.EventMappings,\r
            data = {};\r
\r
        this.callParent([anim, function(){\r
            me.titleField.focus(true);\r
        }]);\r
        \r
        this.deleteButton[o.data && o.data[M.EventId.name] ? 'show': 'hide']();\r
\r
        var rec,\r
        f = this.formPanel.form;\r
\r
        if (o.data) {\r
            rec = o;\r
            this.setTitle(rec.phantom ? this.titleTextAdd : this.titleTextEdit);\r
            f.loadRecord(rec);\r
        }\r
        else {\r
            this.setTitle(this.titleTextAdd);\r
\r
            var start = o[M.StartDate.name],\r
                end = o[M.EndDate.name] || Ext.calendar.util.Date.add(start, {hours: 1});\r
            \r
            data[M.StartDate.name] = start;\r
            data[M.EndDate.name] = end;\r
            data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != Ext.calendar.util.Date.add(end, {millis: 1}).getDate();\r
            rec = new Ext.calendar.data.EventModel(data);\r
\r
            f.reset();\r
            f.loadRecord(rec);\r
        }\r
\r
        if (this.calendarStore) {\r
            this.calendarField.setValue(rec.data[M.CalendarId.name]);\r
        }\r
        this.dateRangeField.setValue(rec.data);\r
        this.activeRecord = rec;\r
\r
        return this;\r
    },\r
\r
    // private\r
    roundTime: function(dt, incr) {\r
        incr = incr || 15;\r
        var m = parseInt(dt.getMinutes(), 10);\r
        return dt.add('mi', incr - (m % incr));\r
    },\r
\r
    // private\r
    onCancel: function() {\r
        this.cleanup(true);\r
        this.fireEvent('eventcancel', this);\r
    },\r
\r
    // private\r
    cleanup: function(hide) {\r
        if (this.activeRecord && this.activeRecord.dirty) {\r
            this.activeRecord.reject();\r
        }\r
        delete this.activeRecord;\r
\r
        if (hide === true) {\r
            // Work around the CSS day cell height hack needed for initial render in IE8/strict:\r
            //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;\r
            this.hide();\r
        }\r
    },\r
\r
    // private\r
    updateRecord: function(record, keepEditing) {\r
        var fields = record.getFields(),\r
            values = this.formPanel.getForm().getValues(),\r
            name,\r
            M = Ext.calendar.data.EventMappings,\r
            obj = {};\r
\r
        Ext.Array.each(fields, function(f) {\r
            name = f.name;\r
            if (name in values) {\r
                obj[name] = values[name];\r
            }\r
        });\r
        \r
        var dates = this.dateRangeField.getValue();\r
        obj[M.StartDate.name] = dates[0];\r
        obj[M.EndDate.name] = dates[1];\r
        obj[M.IsAllDay.name] = dates[2];\r
\r
        record.beginEdit();\r
        record.set(obj);\r
        \r
        if (!keepEditing) {\r
            record.endEdit();\r
        }\r
\r
        return this;\r
    },\r
    \r
    // private\r
    onSave: function(){\r
        if(!this.formPanel.form.isValid()){\r
            return;\r
        }\r
        if(!this.updateRecord(this.activeRecord)){\r
            this.onCancel();\r
            return;\r
        }\r
        this.fireEvent(this.activeRecord.phantom ? 'eventadd' : 'eventupdate', this, this.activeRecord, this.animateTarget);\r
\r
        // Clear phantom and modified states.\r
        this.activeRecord.commit();\r
    },\r
    \r
    // private\r
    onDelete: function(){\r
        this.fireEvent('eventdelete', this, this.activeRecord, this.animateTarget);\r
    }\r
});