Agreed :)
Well, I would override the Ext.calendar.form.EventWindow class.
Please see the "CUSTOMIZATION" comment.
It should help you to start.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.calendar.form.EventWindow.override({
constructor: function(config) {
var formPanelCfg = {
xtype: 'form',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 65
},
frame: false,
bodyStyle: 'background:transparent;padding:5px 10px 10px;',
bodyBorder: false,
border: false,
items: [{
itemId: 'title',
name: Ext.calendar.data.EventMappings.Title.name,
fieldLabel: 'Title',
xtype: 'textfield',
anchor: '100%'
},
{
xtype: 'daterangefield',
itemId: 'date-range',
name: 'dates',
anchor: '100%',
fieldLabel: 'When'
}]
};
if (config.calendarStore) {
this.calendarStore = config.calendarStore;
delete config.calendarStore;
formPanelCfg.items.push({
xtype: 'calendarpicker',
itemId: 'calendar',
name: Ext.calendar.data.EventMappings.CalendarId.name,
anchor: '100%',
store: this.calendarStore
});
}
// CUSTOMIZATION
formPanelCfg.items.push({
itemId : 'Location',
name : Ext.calendar.data.EventMappings.Location.name,
fieldLabel : 'Location',
xtype : 'textfield',
anchor : '100%'
});
// END OF CUSTOMIZATION
this.callParent([Ext.apply({
titleTextAdd: 'Add Event',
titleTextEdit: 'Edit Event',
width: 600,
autocreate: true,
border: true,
closeAction: 'hide',
modal: false,
resizable: false,
buttonAlign: 'left',
savingMessage: 'Saving changes...',
deletingMessage: 'Deleting event...',
layout: 'fit',
fbar: [{
xtype: 'tbtext',
text: '<a href="#" id="tblink">Edit Details...</a>'
},
'->', {
text: 'Save',
disabled: false,
handler: this.onSave,
scope: this
},
{
itemId: 'delete-btn',
text: 'Delete',
disabled: false,
handler: this.onDelete,
scope: this,
hideMode: 'offsets'
},
{
text: 'Cancel',
disabled: false,
handler: this.onCancel,
scope: this
}],
items: formPanelCfg
},
config)]);
}
});
</script>
<script type="text/javascript">
var CompanyX = {
getCalendar : function () {
return CompanyX.CalendarPanel1;
},
getWindow : function() {
return CompanyX.EventWindow1;
},
dayClick : function(cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
record : {
show: function(cal, rec, el) {
CompanyX.getWindow().show(rec, el);
},
edit : function (win, rec) {
win.hide();
rec.commit();
CompanyX.getCalendar().showEditForm(rec);
}
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore ID="EventStore1" runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/15"
EndDate="2012/4/15"
CalendarId="1"
Location="Some Location" />
</Events>
</EventStore>
<CalendarStore ID="CalendarStore1" runat="server">
<Calendars>
<ext:CalendarModel CalendarId="1" Title="Home" />
<ext:CalendarModel CalendarId="2" Title="Work" />
<ext:CalendarModel CalendarId="3" Title="School" />
<ext:CalendarModel CalendarId="4" Title="Other" />
</Calendars>
</CalendarStore>
<Listeners>
<DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
<EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
<ext:EventWindow
ID="EventWindow1"
runat="server"
Hidden="true"
CalendarStoreID="CalendarStore1">
<Listeners>
<EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
</Listeners>
</ext:EventWindow>
</form>
</body>
</html>