PDA

View Full Version : Premium Calendar (Ext.calendar.panel) - eventStores are not called or loaded? SOLVED



dpcoder
29 May 2020, 2:12 AM
Hi All,

I am hoping somebody has got the calendar working with real world server responses (beyond the not very helpful virtual example they put up) ...

We are attempting to implement a calendar but are having issues interacting with data from the server to get it working. Please review below ...
CalendarPanel:



Ext.define('DebugCalendar.view.MyCalendar', {
extend: 'Ext.calendar.panel.Panel',
alias: 'widget.mycalendar',

requires: [
'DebugCalendar.view.MyCalendarViewModel',
'DebugCalendar.view.MyCalendarViewController'
],

controller: 'mycalendar',
viewModel: {
type: 'mycalendar'
},
height: 400,
width: 700,

bind: {
store: '{Dcal}'
}

});

THE Store:



Ext.define('DebugCalendar.view.MyCalendarViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.mycalendar',

requires: [
'Ext.calendar.store.Calendars',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],

stores: {
Dcal: {
autoLoad: true,
proxy: {
type: 'ajax',
extraParams: {
action: 'getCal'
},
url: 'action.php',
reader: {
type: 'json',
rootProperty: 'calendars'
}
},
listeners: {
load: 'onCalendarsLoad'
}
}
}

});

server response from action.php when action = getCal



{
"calendars":
[{
"id":1,
"title": "Test",
"color": "blue",
"hidden": "false",
"editable": "true",
"eventStore": {
"proxy": {
"type": "ajax",
"url": "action.php",
"extraParams": {
"mod": "event",
"action": "getCalEvents"
}
}
}
}]
}

I do see the above data in the store on load before i get errors ...

server response from action.php when action = getCalEvents



[
{
"id": 2001,
"calendarId": 1,
"startDate": "2020-05-05T21:30:00.000Z",
"endDate": "2020-05-05T22:30:00.000Z",
"color": "green",
"title": "Meet with the design team",
"description": "Carve out requirements for the new UI changes"
},{
"id": 2002,
"calendarId": 1,
"startDate": "2020-05-13T21:30:00.000Z",
"endDate": "2020-05-15T22:30:00.000Z",
"color": "red",
"title": "Eat at Thai Ginger",
"description": "Celebrating"
}
]

The apache server logs show only one request to action.php?action=getCal at which point it throws the error in the browser ...

TypeError: store.getEventSource is not a function. (In 'store.getEventSource()', 'store.getEventSource' is undefined) ... from updateStore()

i suspect that on the first load of the calendar it is not decoding the eventStore object properly, i have tried :
1) defining a model for the calendar - makes no difference, still loads up the record and throws the error.
2) i have tried defining eventStoreDefaults ...




eventStoreDefaults: {
autoSync: true,
proxy: {
type: 'ajax',
url: 'actions.php',
extraParams: {
mod: "event",
action: "getCalEvents"
}
}
}



still no second request on the server for the events store url ... with the same browser error..

anybody see the problem?

thanks

dpcoder
29 May 2020, 10:56 PM
Hi all ... [SOLVED] after enough coaxing support evetulay looked at my ticket ...

here below find the secret recipe to make this component work ...

1) don't define a model for the calendar store or supply fields as it breaks the custom reader in the cal store... just feed it the data in the correct form.
2) add this undocumented property to the cal store ... type :'calendar-calendars'

See Below is working object ..



stores: {
Dcal: {
type: 'calendar-calendars',
autoLoad: true,
listeners: {
load: 'onCalendarsLoad',
prefetch: 'onCalendarsPrefetch',
beforeload: 'onCalendarsBeforeLoad'
},
proxy: {
type: 'ajax',
extraParams: {
action: 'getCal'
},
url: 'action.php',
reader: {
type: 'json',
rootProperty: 'calendars'
}
} } }