Ext JS 4 Calendar - Cannot call method 'getTime' of undefined - extjs

Question

I'm getting Cannot call method 'getTime' of undefined error when I try to create a new event by clicking on Ext JS 4 calendar.
Here's my event store defition:
Ext.calendar.data.EventMappings = {
// These are the same fields as defined in the standard EventRecord object but the
// names and mappings have all been customized. Note that the name of each field
// definition object (e.g., 'EventId') should NOT be changed for the default fields
// as it is the key used to access the field data programmatically.
EventId: {name: 'id', mapping:'id', type:'int'}, // int by default
CalendarId: {name: 'cid', mapping: 'cid', type: 'int'}, // int by default
Title: {name: 'title', mapping: 'title'},
StartDate: {name: 'start', mapping: 'start', type: 'date', dateFormat: 'c'},
EndDate: {name: 'end', mapping: 'end', type: 'date', dateFormat: 'c'},
RRule: {name: 'recur_rule', mapping: 'recur_rule'},
Location: {name: 'loc', mapping: 'loc'},
Notes: {name: 'notes', mapping: 'notes'},
Url: {name: 'url', mapping: 'url', type : 'int' },
IsAllDay: {name: 'ad', mapping: 'ad', type: 'boolean'},
Reminder: {name: 'rem', mapping: 'rem'},
// We can also add some new fields that do not exist in the standard EventRecord:
CreatedBy: {name: 'collabUserId', mapping: 'collabUserId', type: 'int'}
};
// Don't forget to reconfigure!
Ext.calendar.data.EventModel.reconfigure();
Ext.define(appName + '.store.Events', {
extend : 'Ext.calendar.data.MemoryEventStore',
// model : appName + '.model.Event',
autoLoad : false,
autoSync : true,
proxy : {
type : 'ajax',
// url : 'randevu/loadEvents.ajax',
api : {
read : 'randevu/loadEvents.ajax',
create : 'randevu/saveOrUpdateEvent.ajax',
update : 'randevu/saveOrUpdateEvent.ajax',
destroy : 'randevu/deleteEvent.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty : 'totalCount',
idProperty : 'id'
},
writer : {
type : 'json',
writeAllFields : true,
encode : true,
root : 'data'
}
}
});
And my Calendar view:
Ext.define(appName + '.view.randevu.RandevuPanel', {
extend : appName + '.view.base.BasePanel',
requires : [ 'Ext.calendar.util.Date',
'Ext.calendar.CalendarPanel',
'Ext.calendar.data.MemoryCalendarStore',
'Ext.calendar.data.MemoryEventStore',
'Ext.calendar.data.Events',
'Ext.calendar.data.Calendars',
'Ext.calendar.form.EventWindow',
appName + '.view.user.UserCombo'
],
alias : 'widget.randevupanel',
iconCls : 'icon-calendar',
width : '100%',
// titleAlign : 'center',
layout : {
type : 'hbox',
align : 'stretch'
},
defaults : { flex : 1 }, //auto stretch
initComponent: function() {
var me = this;
this.calendarStore = OnlineRandevuSistemi.app.getStore('Calendars');
this.eventStore = OnlineRandevuSistemi.app.getStore('Events');
this.updateTitle = function(startDt, endDt) {
var p = Ext.getCmp('app-center'),
fmt = Ext.Date.format;
if(Ext.Date.clearTime(startDt).getTime() == Ext.Date.clearTime(endDt).getTime()){
p.setTitle(fmt(startDt, 'F j, Y'));
}
else if(startDt.getFullYear() == endDt.getFullYear()){
if(startDt.getMonth() == endDt.getMonth()){
p.setTitle(fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'j, Y'));
}
else{
p.setTitle(fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'F j, Y'));
}
}
else{
p.setTitle(fmt(startDt, 'F j, Y') + ' - ' + fmt(endDt, 'F j, Y'));
}
};
this.showEditWindow = function(rec, animateTarget){
console.log(rec);
if(!this.editWin){
this.editWin = Ext.create('Ext.calendar.form.EventWindow', {
calendarStore: this.calendarStore,
listeners: {
'eventadd': {
fn: function(win, rec){
win.hide();
rec.data.IsNew = false;
this.eventStore.add(rec);
// this.eventStore.sync();
this.showMsg('<b>'+ rec.data.Title +'</b> etkinliği eklendi.');
},
scope: this
},
'eventupdate': {
fn: function(win, rec){
win.hide();
rec.commit();
// this.eventStore.sync();
this.showMsg('<b>'+ rec.data.Title + '</b> etkinliği düzenlendi.');
},
scope: this
},
'eventdelete': {
fn: function(win, rec){
this.eventStore.remove(rec);
// this.eventStore.sync();
win.hide();
this.showMsg('<b>'+ rec.data.Title +'</b> etkinliği silindi.');
},
scope: this
},
'editdetails': {
fn: function(win, rec){
win.hide();
Ext.getCmp('app-calendar').showEditForm(rec);
}
}
}
});
}
this.editWin.show(rec, animateTarget);
};
this.showMsg = function(msg){
Ext.example.msg('Bilgilendirme', msg);
// Ext.fly('app-msg').update(msg).removeCls('x-hidden');
};
this.clearMsg = function(){
Ext.fly('app-msg').update('').addCls('x-hidden');
};
this.title = bundle.getMsg('randevupanel.title');
this.items = [{
id: 'app-center',
title: '...', // will be updated to the current view's date range
titleAlign : 'center',
region: 'center',
layout: 'border',
listeners: {
'afterrender': function(){
Ext.getCmp('app-center').header.addCls('app-center-header');
}
},
items: [{
xtype: 'container',
id:'app-west',
region: 'west',
width: Ext.themeName === 'neptune' ? 214 : 179,
items: [{
xtype: 'datepicker',
id: 'app-nav-picker',
cls: 'ext-cal-nav-picker',
listeners: {
'select': {
fn: function(dp, dt){
Ext.getCmp('app-calendar').setStartDate(dt);
},
scope: this
}
}
}]
},{
xtype: 'calendarpanel',
eventStore: this.eventStore,
// eventStore: 'Events',
calendarStore: this.calendarStore,
border: false,
id:'app-calendar',
region: 'center',
activeItem: 3, // month view
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
},
listeners: {
'eventclick': {
fn: function(vw, rec, el){
this.showEditWindow(rec, el);
this.clearMsg();
},
scope: this
},
'eventover': function(vw, rec, el){
//console.log('Entered evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);
},
'eventout': function(vw, rec, el){
//console.log('Leaving evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);
},
'eventadd': {
fn: function(cp, rec){
this.showMsg('Event '+ rec.data.Title +' was added');
},
scope: this
},
'eventupdate': {
fn: function(cp, rec){
this.showMsg('Event '+ rec.data.Title +' was updated');
},
scope: this
},
'eventcancel': {
fn: function(cp, rec){
// edit canceled
},
scope: this
},
'viewchange': {
fn: function(p, vw, dateInfo){
if(this.editWin){
this.editWin.hide();
}
if(dateInfo){
// will be null when switching to the event edit form so ignore
Ext.getCmp('app-nav-picker').setValue(dateInfo.activeDate);
this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
}
},
scope: this
},
'dayclick': {
fn: function(vw, dt, ad, el){
this.showEditWindow({
StartDate: dt,
IsAllDay: ad
}, el);
this.clearMsg();
},
scope: this
},
'rangeselect': {
fn: function(win, dates, onComplete){
this.showEditWindow(dates);
this.editWin.on('hide', onComplete, this, {single:true});
this.clearMsg();
},
scope: this
},
'eventmove': {
fn: function(vw, rec){
var mappings = Ext.calendar.data.EventMappings,
time = rec.data[mappings.IsAllDay.name] ? '' : ' \\a\\t g:i a';
rec.commit();
this.showMsg('Event '+ rec.data[mappings.Title.name] +' was moved to '+
Ext.Date.format(rec.data[mappings.StartDate.name], ('F jS'+time)));
this.eventStore.sync();
},
scope: this
},
'eventresize': {
fn: function(vw, rec){
rec.commit();
this.showMsg('Event '+ rec.data.Title +' was updated');
},
scope: this
},
'eventdelete': {
fn: function(win, rec){
this.eventStore.remove(rec);
this.showMsg('Event '+ rec.data.Title +' was deleted');
},
scope: this
},
'initdrag': {
fn: function(vw){
if(this.editWin && this.editWin.isVisible()){
this.editWin.hide();
}
},
scope: this
}
}
}]
}];
this.scdUserLabel = Ext.create('Ext.form.DisplayField', {
hideLabel : true,
value : 'Misafir Oturumu'
});
this.btnLogin = Ext.create('Ext.Button', {
text : bundle.getMsg('randevupanel.btnLogin.text'),
iconCls : 'icon-sign-in',
action : 'login',
tooltip : bundle.getMsg('randevupanel.btnLogin.tip')
});
this.btnLogout = Ext.create('Ext.Button', {
text : bundle.getMsg('randevupanel.btnLogout.text'),
iconCls : 'icon-sign-out',
action : 'logout',
hidden : true,
tooltip : bundle.getMsg('randevupanel.btnLogout.tip')
});
this.tbar = Ext.create('Ext.Toolbar', {
items : [ ' ', me.scdUserLabel, '->', me.btnLogin, me.btnLogout ]
});
this.callParent(arguments);
}
});