Overriding ExtJs CalendarPanel's EventEditForm

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.


HTML icon overriding-eventedit-form.html5.42 KB


Please, i need your help rahul.

I'm using Calendar Pro full customize to my requirement, but inside Joomla!. When i tried update a record (through the calendar interface, not manual), the ajax request add "/{eventid}" (example: /15) to my url and it is a problem for my controller.

I study the configuration for writer and store, and i don't find where can i say it that don't do it.

Thanks a lot.

rahul's picture

Hi Eddy, if I have understood you correctly, then I think HttpProxy's api config option is what you need.

Thanks for your quick answer.

I'm sorry for my english, but my language is spanish and i trie learn that idiom.

That is my configuration for httpproxy:

var proxy = new Ext.data.HttpProxy({

disableCaching: false, // no need for cache busting when loading via Ajax

api: {

read:    apiRoot+'view',

create:  apiRoot+'create',

update:  {

url: apiRoot+'update',

method: 'POST'


destroy: {

url: apiRoot+'destroy',

method: 'POST'



Yo can see that method for update and destroy i change for POST, because i can't take the arguments in Joomla! with PUT and DESTROY (default).
I think that your answer is right and i believe that the argument "restful" should be false. This way will be prevent add the /{id} at the end for the ajax request, but this do'nt do it. I set that parameter to false and this keeps happening.
var store = new Ext.ensible.cal.EventStore({
id: 'event-store',
restful: false,
proxy: proxy,
reader: reader,
writer: writer,
Again, sorry for my english, but i need to resolve that problem.

Rahul, the problem is that the config option "restful" is for HttpProxy, and not to Ext.ensible.cal.EventStore. I found no documentation for EventStore, indeed. Any way, i set the config option restful to false in my HttpProxy and the ajax request don´t append /{id} to the url.

I'm very grateful for your help. I hope help more people with the same problem, because i searched in internet a solution and i found nothing. May be the problem is trivial, but not for me. 

Thanks a lot.

rahul's picture

Hi Eddy, sorry for the delayed response. You need to understand that Ext.ensible.cal.EventStore is just another Store class. And its present more as a POC than to be used directly. You can very well use JsonStore, XmlStore or any other store class, and configure your Proxy and Store appropriately. In fact, in one of my apps, I use Ext.ux.data.PagingStore as the store class for the Calendar.

Hi.. Rahul 

I had tried to override the EventWindow and EventDetails and successfully achieved that. But I am having some problems with that, So I want to extend the EventWindow and create my new Class and then want to register it to Ext.WindowMgr.

Please suggest me some way so I can extend the EventWindow and easily register to Ext.WindowMgr.

With Regards

Yogendra Singh

Sr. Programmer


rahul's picture

Hi Yogendra, Ext.WindowMgr is not for registering or managing Window derived classes but for registering and managing Window instances themselves. You will need to override more Calendar methods if you want to use your custom Window class for Calendar.