View Full Version : Calendar event store load help?

24 Feb 2011, 3:16 AM
I have set up a calendar as follows:

this.eventStore = new Ext.data.JsonStore({
id: 'eventStore',
root: 'Data.items',
proxy: new Ext.data.HttpProxy({
url: AppRootPath + 'Calendar/GetCalendarData',
method: 'POST'
fields: [
{name:'StartDate', mapping: 'start', type: 'date', dateFormat: 'd F Y'},
{name:'EndDate', mapping: 'end', type: 'date', dateFormat: 'd F Y'},
{name:'Title', mapping: 'title', type: 'string'},
{name:'Notes', mapping: 'notes', type: 'string'},
{name:'CalendarId', mapping: 'cid', type: 'string'}]

this.calendar = new Ext.calendar.CalendarPanel({
activeItem: 2,
id: 'calendar',
eventStore: this.eventStore,
calendarStore: this.calendarStore,
headerCfg: {
tag: 'center',
cls: 'x-panel-header x-unselectable'
monthViewCfg: {
showHeader: true,
showWeekLinks: true,
showWeekNumbers: true
title: 'My Calendar', // the header of the calendar, could be a subtitle for the app
listeners: {
'eventclick': {
fn: function(vw, rec, el){
scope: this
'dayclick': {
fn: function(vw, dt, ad, el){
scope: this
'viewchange': {
fn: function(p, vw, dateInfo){
updateTitle.apply(this, [dateInfo.viewStart, dateInfo.viewEnd]);
Ext.getCmp('app-nav-picker' + config.id).setValue(dateInfo.activeDate);
scope: this
'eventmove': {
fn: function(vw, rec){
//var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';
//this.showMsg('Event '+ rec.data.Title +' was moved to '+rec.data.StartDate.format('F jS'+time));
scope: this


The Json response looks as follows:


The store gets loaded 4 times initially even though I do not call the store.load() method. Also the dates are sent in the wrong format which the server does not expect.
How can I stop or control the multiple loads?
Can I intercept the load calls to specify the correct the date params to be in the correct format?

Thanks in advance!