Ext.define('Ext.calendar.form.EventDetails', {
extend: 'Ext.form.Panel',
alias: 'widget.eventeditform',
requires: [
'Ext.calendar.form.field.DateRange',
'Ext.calendar.form.field.ReminderCombo',
'Ext.calendar.data.EventMappings',
'Ext.calendar.form.field.CalendarCombo'
],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 65
},
title: 'Event Form',
titleTextAdd: 'Add Event',
titleTextEdit: 'Edit Event',
bodyStyle: 'background:transparent;padding:20px 20px 10px;',
border: false,
buttonAlign: 'center',
autoHeight: true,
cls: 'ext-evt-edit-form',
newId: 10000,
layout: 'column',
initComponent: function() {
this.addEvents({
eventadd: true,
eventupdate: true,
eventdelete: true,
eventcancel: true
});
this.titleField = new Ext.form.Text({
fieldLabel: 'Title',
name: Ext.calendar.data.EventMappings.Title.name,
emptyText: 'Event Title',
allowBlank: false,
anchor: '90%'
});
this.dateRangeField = new Ext.calendar.form.field.DateRange({
fieldLabel: 'When',
singleLine: false,
anchor: '90%'
});
this.reminderField = new Ext.calendar.form.field.ReminderCombo({
name: 'Reminder',
anchor: '70%'
});
this.notesField = new Ext.form.TextArea({
fieldLabel: 'Notes',
name: Ext.calendar.data.EventMappings.Notes.name,
grow: true,
growMax: 150,
anchor: '100%'
});
this.locationField = new Ext.form.Text({
fieldLabel: 'Location',
name: Ext.calendar.data.EventMappings.Location.name,
anchor: '100%'
});
this.urlField = new Ext.form.Text({
fieldLabel: 'Web Link',
name: Ext.calendar.data.EventMappings.Url.name,
anchor: '100%'
});
var leftFields = [this.titleField, this.dateRangeField, this.reminderField],
rightFields = [this.notesField, this.locationField, this.urlField];
if (this.calendarStore) {
this.calendarField = new Ext.calendar.form.field.CalendarCombo({
store: this.calendarStore,
anchor: '70%',
name: Ext.calendar.data.EventMappings.CalendarId.name
});
leftFields.splice(2, 0, this.calendarField);
}
this.items = [{
id: 'left-col',
columnWidth: 0.65,
layout: 'anchor',
border: false,
items: leftFields
},
{
id: 'right-col',
columnWidth: 0.35,
layout: 'anchor',
border: false,
items: rightFields
}];
this.fbar = [{
cls: 'ext-del-btn',
itemId: this.id+'-del-btn',
text: 'Delete Event',
scope: this,
handler: this.onDelete,
minWidth: 150
},
{
text: 'Save',
scope: this,
handler: this.onSave
},
{
text: 'Cancel',
scope: this,
handler: this.onCancel
}];
this.callParent(arguments);
},
loadRecord: function(rec){
this.form.reset().loadRecord.apply(this.form, arguments);
this.activeRecord = rec;
this.dateRangeField.setValue(rec.data);
if(this.calendarStore){
this.form.setValues({
'calendar': rec.data[Ext.calendar.data.EventMappings.CalendarId.name]
});
}
if (rec.phantom) {
this.setTitle(this.titleTextAdd);
this.down('#' + this.id + '-del-btn').hide();
}
else {
this.setTitle(this.titleTextEdit);
this.down('#' + this.id + '-del-btn').show();
}
this.titleField.focus();
},
updateRecord: function(){
var dates = this.dateRangeField.getValue(),
M = Ext.calendar.data.EventMappings,
rec = this.activeRecord,
fs = rec.fields,
dirty = false;
rec.beginEdit();
fs.each(function(f){
var field = this.form.findField(f.name);
if(field){
var value = field.getValue();
if (value.getGroupValue) {
value = value.getGroupValue();
}
else if (field.eachItem) {
value = [];
field.eachItem(function(item){
value.push(item.getValue());
});
}
rec.set(f.name, value);
}
}, this);
rec.set(M.StartDate.name, dates[0]);
rec.set(M.EndDate.name, dates[1]);
rec.set(M.IsAllDay.name, dates[2]);
dirty = rec.dirty;
rec.endEdit();
return dirty;
},
setStartDate: function(d) {
var me = this,
duration = me.dateRangeField.getDuration();
me.dateRangeField.setDT(d, 'start');
me.dateRangeField.setDT(new Date(me.dateRangeField.getDT('start').getTime() + duration), 'end');
},
setEndDate: function(d) {
this.dateRangeField.setDT(d, 'end');
},
onCancel: function() {
this.cleanup(true);
this.fireEvent('eventcancel', this, this.activeRecord);
},
cleanup: function(hide) {
if (this.activeRecord && this.activeRecord.dirty) {
this.activeRecord.reject();
}
delete this.activeRecord;
if (this.form.isDirty()) {
this.form.reset();
}
},
onSave: function(){
if(!this.form.isValid()){
return;
}
if(!this.updateRecord()){
this.onCancel();
return;
}
this.fireEvent(this.activeRecord.phantom ? 'eventadd' : 'eventupdate', this, this.activeRecord);
},
onDelete: function() {
this.fireEvent('eventdelete', this, this.activeRecord);
}
});