/** * A base implementation of a form for the modern toolkit. * @abstract */Ext.define('Ext.calendar.form.AbstractForm', { extend: 'Ext.form.Panel', requires: [ 'Ext.calendar.form.CalendarPicker', 'Ext.calendar.form.TimeField', 'Ext.field.Text', 'Ext.field.TextArea', 'Ext.field.DatePicker', 'Ext.form.FieldSet', 'Ext.layout.HBox' ], trackResetOnLoad: true, defaultListenerScope: true, platformConfig: { '!desktop': { width: '100%', height: '100%', layout: 'fit', isCompact: true, fullscreen: true }, 'desktop': { modal: true, centered: true, scrollable: 'y' } }, floated: true, config: { /** * @cfg {Object} calendarField * The config for the calendar field. */ calendarField: { xtype: 'calendar-calendar-picker', label: 'Calendar', name: 'calendarId', displayField: 'title', valueField: 'id' }, /** * @cfg {Object} titleField * The config for the title field. */ titleField: { xtype: 'textfield', label: 'Title', name: 'title' }, /** * @cfg {Object} startDateField * The config for the start date field. */ startDateField: { xtype: 'datepickerfield', label: 'From', itemId: 'startDate', name: 'startDate' }, /** * @cfg {Object} startTimeField * The config for the start time field. */ startTimeField: { xtype: 'calendar-timefield', label: ' ', itemId: 'startTime', name: 'startTime' }, /** * @cfg {Object} endDateField * The config for the end date field. */ endDateField: { xtype: 'datepickerfield', label: 'To', itemId: 'endDate', name: 'endDate' }, /** * @cfg {Object} endTimeField * The config for the end time field. */ endTimeField: { xtype: 'calendar-timefield', label: ' ', itemId: 'endTime', name: 'endTime' }, /** * @cfg {Object} allDayField * The config for the all day field. */ allDayField: { xtype: 'checkboxfield', itemId: 'allDay', name: 'allDay', label: 'All Day', listeners: { change: 'onAllDayChange' } }, /** * @cfg {Object} descriptionField * The config for the description field. */ descriptionField: { xtype: 'textareafield', label: 'Description', name: 'description', flex: 1, minHeight: '6em' }, /** * @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' } }, initialize: function() { var me = this; me.initForm(); me.add({ xtype: 'toolbar', docked: 'bottom', items: me.generateButtons() }); me.callParent(); me.applyValues(); me.checkFields(); }, generateButtons: function() { var buttons = [], drop = this.getDropButton(); if (drop) { buttons.push(drop); } buttons.push({ xtype: 'component', flex: 1 }, this.getCancelButton(), this.getSaveButton()); return buttons; }, fieldQuery: function() { return this.query('[isField][?name]'); }, applyValues: function() { this.setValues(this.consumeEventData()); }, createItems: function() { var me = this, calField = me.getCalendarField(); if (!calField.store) { calField.store = me.getCalendarStore(); } me.add([{ xtype: 'fieldset', scrollable: me.isCompact ? 'y' : undefined, margin: 0, layout: { type: 'vbox', align: 'stretch' }, items: [ calField, me.getTitleField(), me.getStartDateField(), me.getStartTimeField(), me.getEndDateField(), me.getEndTimeField(), me.getAllDayField(), me.getDescriptionField() ] }]); }, privates: { checkFields: function() { var checked = this.down('#allDay').isChecked(); this.down('#startTime').setDisabled(checked); this.down('#endTime').setDisabled(checked); }, onAllDayChange: function() { this.checkFields(); }, onCancelTap: function() { this.fireCancel(); }, onDropTap: function() { this.fireDrop(); }, onSaveTap: function() { this.fireSave(this.produceEventData(this.getValues())); } }});