/** * A base implementation of a form for the classic toolkit. * @abstract */Ext.define('Ext.calendar.form.AbstractForm', { extend: 'Ext.window.Window', requires: [ 'Ext.layout.container.Fit', 'Ext.layout.container.VBox', 'Ext.layout.container.HBox', 'Ext.form.Panel', 'Ext.form.field.Text', 'Ext.form.field.Date', 'Ext.form.field.Time', 'Ext.form.field.Checkbox', 'Ext.calendar.form.CalendarPicker' ], layout: 'fit', modal: true, closable: false, defaultListenerScope: true, config: { /** * @cfg {Object} calendarField * The config for the calendar field. */ calendarField: { xtype: 'calendar-calendar-picker', fieldLabel: 'Calendar', name: 'calendarId', forceSelection: true, editable: false, queryMode: 'local', displayField: 'title', valueField: 'id' }, /** * @cfg {Object} titleField * The config for the title field. */ titleField: { xtype: 'textfield', fieldLabel: 'Title', name: 'title', allowBlank: false }, /** * @cfg {Object} fromContainer * The config for the from container. */ fromContainer: { xtype: 'fieldcontainer', fieldLabel: 'From', layout: 'hbox' }, /** * @cfg {Object} startDateField * The config for the start date field. */ startDateField: { xtype: 'datefield', itemId: 'startDate', name: 'startDate', allowBlank: false }, /** * @cfg {Object} startTimeField * The config for the start time field. */ startTimeField: { xtype: 'timefield', itemId: 'startTime', name: 'startTime', margin: '0 0 0 5' }, /** * @cfg {Object} toContainer * The config for the to container. */ toContainer: { xtype: 'fieldcontainer', fieldLabel: 'To', layout: 'hbox' }, /** * @cfg {Object} endDateField * The config for the end date field. */ endDateField: { xtype: 'datefield', itemId: 'endDate', name: 'endDate', allowBlank: false }, /** * @cfg {Object} endTimeField * The config for the end time field. */ endTimeField: { xtype: 'timefield', itemId: 'endTime', name: 'endTime', margin: '0 0 0 5' }, /** * @cfg {Object} allDayField * The config for the all day field. */ allDayField: { xtype: 'checkbox', itemId: 'allDay', name: 'allDay', boxLabel: 'All Day', hideEmptyLabel: false, handler: 'onAllDayChange' }, /** * @cfg {Object} descriptionField * The config for the description field. */ descriptionField: { xtype: 'textarea', fieldLabel: 'Description', name: 'description', flex: 1 }, /** * @cfg {Object} dropButton * The config for the drop button. `null` to not show this button. */ dropButton: { text: 'Delete', handler: 'onDropTap' }, /** * @cfg {Object} saveButton * The config for the save button. */ saveButton: { text: 'Save', handler: 'onSaveTap' }, /** * @cfg {Object} cancelButton * The config for the cancel button. */ cancelButton: { text: 'Cancel', handler: 'onCancelTap' } }, initComponent: function() { var me = this; me.initForm(); me.fbar = me.generateButtons(); me.callParent(); me.form = me.items.first(); me.checkFields(); me.applyValues(); }, generateButtons: function() { var buttons = [], drop = this.getDropButton(); if (drop) { buttons.push(drop); } buttons.push({ xtype: 'component', flex: 1 }, this.getSaveButton(), this.getCancelButton()); return buttons; }, applyValues: function() { this.form.getForm().setValues(this.consumeEventData()); }, createItems: function() { var me = this, calField = me.getCalendarField(), fromCt = me.getFromContainer(), toCt = me.getToContainer(); if (!calField.store) { calField.store = me.getCalendarStore(); } if (!fromCt.items) { fromCt.items = [me.getStartDateField(), me.getStartTimeField()]; } if (!toCt.items) { toCt.items = [me.getEndDateField(), me.getEndTimeField()]; } this.items = [{ xtype: 'form', border: false, trackResetOnLoad: true, layout: { type: 'vbox', align: 'stretch' }, bodyPadding: 10, items: [ calField, me.getTitleField(), fromCt, toCt, me.getAllDayField(), me.getDescriptionField() ] }]; }, privates: { checkFields: function() { var checked = this.down('#allDay').checked; this.down('#startTime').setDisabled(checked); this.down('#endTime').setDisabled(checked); }, onAllDayChange: function() { this.checkFields(); }, onCancelTap: function() { this.fireCancel(); }, onDropTap: function() { this.fireDrop(); }, onSaveTap: function() { var form = this.form, values = form.getForm().getFieldValues(); if (!form.isValid()) { return; } values.allDay = this.down('#allDay').checked; this.fireSave(this.produceEventData(values)); } }});