ExtJs Calendar EventStore help? - extjs

Question

I have been trying to set up a baisc calendar example to play around with using ExtJs Calendar.
I have looked at examples and documentation on
Ext Calendar Pro.
I am having difficulty just getting the basic calendar example to work.
I think my problem is that I am not defining the store correctly, I know that the store should contain records of type 'Ext.calendar.EventRecord'.
What type of store/reader should i use to read records?
Here is my code:
var recs = [];
rec = new Ext.calendar.EventRecord({
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
});
recs[0] = rec;
store = new Ext.data.Store({
data: recs,
reader: new Ext.data.ArrayReader({
fields: ['StartDate', 'EndDate', 'Title', 'Notes']
})
});
Ext.apply(this, config, {
title: 'calendar',
layout: 'fit',
activeItem: 1,
eventStore: store
});//Ext.apply

Answer 1

Looking at this example, it looks like you need to be using a JsonStore (which has a JsonReader):
new Ext.data.JsonStore({
id: 'eventStore',
root: 'evts',
data: eventList, // defined in event-list.js
proxy: new Ext.data.MemoryProxy(),
fields: Ext.calendar.EventRecord.prototype.fields.getRange(),
sortInfo: {
field: 'StartDate',
direction: 'ASC'
}
});
With eventList defined as follows:
var eventList = {
"evts": [{
"id": 1001,
"cid": 1,
"title": "Vacation",
"start": today.add(Date.DAY, -20).add(Date.HOUR, 10),
"end": today.add(Date.DAY, -10).add(Date.HOUR, 15),
"ad": false,
"notes": "Have fun"
}]
}
If you're using a remote provider, simply change your data property in the EventStore to load from a url instead. Your JSON response should be in a structure as defined by eventList.
Hope that helps.