ExtJs Calendar EventStore help?

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           

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.