I had earlier blogged about various aspects related to Brian Moeskau’s CalendarPanel component for ExtJs 3.x here, here and here. Somewhere last Decembar, I also submitted a feature request to Brian for refactoring EventEditWindow and EventEditForm components of the CalendarPanel package to allow overriding their layout and form widgets more easily.

The support request was postponed for later and I had in the meanwhile found my own way of completely customizing these components without needing to edit the CalendarPanel code itself (it was as easy as overriding the initComponent method for these components). I had since then forgotten this issue, but was reminded of it again last week when another person sought help related to the same issue on Extensible forums. So, I thought of sharing my solution publicly.

You can see a customized EventEditForm for the CalendarPanel below (click here to open the example in a new window):

And the code which does the bulk of the customization is below:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Ext.override(Ext.ensible.cal.EventEditForm, {
layout: ‘form’,

initComponent: function() {
this.addEvents({
eventadd: true,
eventupdate: true,
eventdelete: true,
eventcancel: true
});

this.titleField = new Ext.form.TextField({
fieldLabel: this.titleLabelText,
name: Ext.ensible.cal.EventMappings.Title.name,
anchor: ‘95%’
});
this.dateRangeField = new Ext.ensible.cal.DateRangeField({
fieldLabel: this.datesLabelText,
singleLine: false,
anchor: ‘95%’,
listeners: {
‘change’: this.onDateChange.createDelegate(this)
}
});
this.reminderField = new Ext.ensible.cal.ReminderField({
name: Ext.ensible.cal.EventMappings.Reminder.name,
fieldLabel: this.reminderLabelText
});
this.notesField = new Ext.form.HtmlEditor({
fieldLabel: this.notesLabelText,
name: Ext.ensible.cal.EventMappings.Notes.name,
grow: true,
growMax: 150,
anchor: ‘95%’,
height: 150
});
this.locationField = new Ext.form.TextField({
fieldLabel: this.locationLabelText,
name: Ext.ensible.cal.EventMappings.Location.name,
anchor: ‘95%’
});
this.urlField = new Ext.form.TextField({
fieldLabel: this.webLinkLabelText,
name: Ext.ensible.cal.EventMappings.Url.name,
anchor: ‘95%’
});

this.recurrenceField = new Ext.ensible.cal.RecurrenceField({
name: Ext.ensible.cal.EventMappings.RRule.name,
fieldLabel: this.repeatsLabelText,
anchor: ‘95%’
});

this.calendarField = new Ext.ensible.cal.CalendarCombo({
store: this.calendarStore,
fieldLabel: this.calendarLabelText,
name: Ext.ensible.cal.EventMappings.CalendarId.name
});

this.items = [this.titleField, this.locationField, this.dateRangeField, this.calendarField, this.recurrenceField, this.reminderField, this.notesField, this.urlField];

this.fbar = [
{
text: this.saveButtonText, scope: this, handler: this.onSave
}, {
cls: ‘ext-del-btn’, text: this.deleteButtonText, scope: this, handler: this.onDelete
}, {
text: this.cancelButtonText, scope: this, handler: this.onCancel
}
];

Ext.ensible.cal.EventEditForm.superclass.initComponent.call(this);
}
});
{/syntaxhighlighter}

As you can see, I have overriden the EventEditForm to set its layout to ‘form’ and its initComponent method to add components in my desired order and layout.

You would notice that I have even used an HtmlEditor for Notes instead of the default textarea. This is all easy once you override the initComponent method. You can even add more Form fields if your Event store has corresponding data fields (just take care of assigning the “name” property of each Form field and the EventEditForm will automatically transfer values between the UI and your store record during showing and saving an event).

There’s an important point you might want to take care of. EventEditForm by default has its autoHeight set to true. You might want to set this to false and also set autoScroll to true if you want scrollbars to be attached automatically depending upon browser window’s sizing.

You can find complete code for the example in this blog post attached below.