如何用MVC应用程序定制extjs远程可扩展日历的例子

Question

我已经下载了' extension -1.6.0-b1'，我正试图理解远程示例，以自定义它与我的应用程序。我用extjs 4.0.7编码。
我想知道如何在mvc应用程序集成的例子?是否有一个架构清晰的例子:存储+模型+控制器?
编辑:
这是我现在使用的代码:

Ext.define('Webdesktop.view.calendar.Calendar', {
extend : 'Ext.tab.Panel',
alias : 'widget.calendar_calendar',
//autoShow : true,
paths: {
    'Extensible': 'extensible-1.6.0-b1/src',
    'Extensible.example': 'extensible-1.6.0-b1/examples'
},
requires:([
    'Ext.Viewport',
    'Ext.layout.container.Border',
    'Ext.data.proxy.Rest',
    'Extensible.calendar.data.MemoryCalendarStore',
    'Extensible.calendar.data.EventStore',
    'Extensible.calendar.CalendarPanel'
    ]),
initComponent: function() {
    var me = this;
    var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'app/data/calendars.json',
            noCache: false,            
            reader: {
                type: 'json',
                root: 'calendars'
            }
        }
    });
    var eventStore = new Ext.data.JsonStore({ 
        autoLoad: true,
        fields: [
         {name: 'EventId', mapping:'id', type:'int'},
         {name: 'CalendarId', mapping: 'cid', type: 'int'},
         {name: 'Title', mapping: 'title'},
         {name: 'StartDate', mapping: 'start', type: 'date', dateFormat: 'c'},
         {name: 'EndDate', mapping: 'end', type: 'date', dateFormat: 'c'}
        ],
        proxy    : {
            type   : 'ajax',
            api    : {
                read   : GLOBAL_USER_PROFILE.apiUrl + '_module/calendar/_action/loadEvent'
            },
            extraParams : {
                _module : 'calendar',
                _action : 'loadEvent',
                _db : '2d3964b9...e53a82'
            },
            reader : {
                type : 'json',
                root : 'evts'
            },
            writer : {
                type   : 'json',
                encode : true
            }
        },
        listeners: {
            'write': function(store, operation){
                var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
                switch(operation.action){
                    case 'create':
                        Extensible.example.msg('Add', 'Added "' + title + '"');
                        break;
                    case 'update':
                        Extensible.example.msg('Update', 'Updated "' + title + '"');
                        break;
                    case 'destroy':
                        Extensible.example.msg('Delete', 'Deleted "' + title + '"');
                        break;
                }
            }
        }
    });
    var cp = Ext.create('Extensible.calendar.CalendarPanel', {
        id: 'calendar-remote',
        region: 'center',
        eventStore: eventStore,
        calendarStore: calendarStore,
        title: 'Remote Calendar'
    });
    Ext.apply(me, {
        items : {
            xtype      : 'panel',
            activeItem : 0,
            layout: {
                type: 'fit'
            },
            border     : false, //FIXME: see class comment, bug
            defaults   : {
                closable : false, //FIXME: see class comment, bug
                border   : false //FIXME: see class comment, bug
            },
            title       : 'الاستقبال',
            closable    : true,
            bodyPadding : 0,
            items: [
            cp                 
            ]
        }
    });
    me.callParent();
}
});

返回json:

{
"evts":[{
    "EventId":"1",
    "CalendarId":"0",
    "Title":"$data",
    "StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
    "EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
    "Duration":"0",
    "Location":"",
    "Notes":"",
    "Url":"",
    "IsAllDay":"0",
    "Reminder":""
},{
    "EventId":"2",
    "CalendarId":"0",
    "Title":"$data",
    "StartDate":"Mon May 13 2013 09:21:57 GMT+0100",
    "EndDate":"Mon May 13 2013 09:21:57 GMT+0100",
    "Duration":"0",
    "Location":"",
    "Notes":"",
    "Url":"",
    "IsAllDay":"0",
    "Reminder":""
}]
}

但是事件没有显示在日历中，我在Firebug中有这个错误:

TypeError: data[M.StartDate.name] is null

Answer 1

我有同样的问题，我昨天刚刚解决了它，这是关于你的日期格式不正确采取这可能会帮助你:这是我的视图:

Ext.define('Congectis.view.CalendarTry', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.calendartry',
    requires: [
        'Ext.data.proxy.Rest',
        'Extensible.calendar.data.MemoryCalendarStore',
        'Extensible.calendar.CalendarPanel',
        'Extensible.calendar.data.EventStore'
    ],
    autoShow: true,
    layout: 'fit',
    Store: ['Evts'],
    initComponent: function () {
        var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '../../../../../MVC/eLeave/data/event2.json',
                noCache: false,
                reader: {
                    type: 'json',
                    root: 'calendars'
                }
            }
        });
        var eventstore = Ext.create('Extensible.calendar.data.EventStore', {
            autoLoad: true,
            fields: [
                {name: 'EventId', mapping: 'EventId', type: 'int'},
                {name: 'CalendarId', mapping: 'CalendarId', type: 'int'},
                {name: 'Title', mapping: 'Title'},
                {name: 'StartDate', mapping: 'StartDate', type: 'date', dateFormat: 'm-d-Y'},
                {name: 'EndDate', mapping: 'EndDate', type: 'date', dateFormat: 'm-d-Y'}
            ],
            proxy: {
                type: 'ajax',
                url: '../../../../../MVC/eLeave/data/event1.json',
                noCache: false,
                reader: {
                    type: 'json',
                    root: 'data'
                },
                writer: {
                    type: 'json',
                    nameProperty: 'mapping'
                },
                listeners: {
                    exception: function (proxy, response, operation, options) {
                        var msg = response.message ? response.message : Ext.decode(response.responseText).message;
                        Ext.Msg.alert('Server Error', msg);
                    }
                }
            },
            //option for generically messaging after CRUD persistence has succeeded.    
            listeners: {
                'write': function (store, operation) {
                    var title = Ext.value(operation.records[0].data[Extensible.calendar.data.EventMappings.Title.name], '(No title)');
                    switch (operation.action) {
                        case 'create':
                            Extensible.example.msg('Add', 'Added "' + title + '"');
                            break;
                        case'update':
                            Extensible.example.msg('Update', 'Updated "' + title + '"');
                            break;
                        case'destroy':
                            Extensible.example.msg('Delete', 'Deleted "' + title + '"');
                            break;
                    }
                }
            }
        });
        this.items = [{
                xtype: 'extensible.calendarpanel',
                eventStore: eventstore,
                calendarStore: calendarStore,
                title: 'Calendrier des conges',
                name: 'eLeave-calendar',
                height: 500,
                width: 500
            }];
        //Extensible.calendar.data.CalendarModel.reconfigure();
        this.callParent(arguments);
    }
});

这是json存储

{
    "success": true,
    "message": "Loaded data",
    "data": [{
            "id": 1001,
            "cid": 1,
            "start": "2015-03-18T10:00:00-07:00",
            "end": "2015-03-28T15:00:00-07:00",
            "title": "Vacation",
            "notes": "Have fun"
        }, {
            "id": 1002,
            "cid": 2,
            "start": "2015-04-07T11:30:00-07:00",
            "end": "2015-04-07T13:00:00-07:00",
            "title": "Lunch with Matt",
            "loc": "Chuy's",
            "url": "http://chuys.com",
            "notes": "Order the queso"
        }, {
            "id": 1003,
            "cid": 3,
            "start": "2015-04-07T15:00:00-07:00",
            "end": "2015-04-07T15:00:00-07:00",
            "title": "Project due"
        }, {
            "id": 1004,
            "cid": 1,
            "start": "2015-04-07T00:00:00-07:00",
            "end": "2015-04-07T00:00:00-07:00",
            "title": "Sarah's birthday",
            "ad": true,
            "notes": "Need to get a gift"
        }, {
            "id": 1005,
            "cid": 2,
            "start": "2015-03-26T00:00:00-07:00",
            "end": "2015-04-16T23:59:59-07:00",
            "title": "A long one...",
            "ad": true
        }, {
            "id": 1006,
            "cid": 3,
            "start": "2015-04-12T00:00:00-07:00",
            "end": "2015-04-13T23:59:59-07:00",
            "title": "School holiday"
        }, {
            "id": 1007,
            "cid": 1,
            "start": "2015-04-07T09:00:00-07:00",
            "end": "2015-04-07T09:30:00-07:00",
            "title": "Haircut",
            "notes": "Get cash on the way",
            "rem": 60
        }, {
            "id": 1008,
            "cid": 3,
            "start": "2015-03-08T00:00:00-08:00",
            "end": "2015-03-10T00:00:00-07:00",
            "title": "An old event",
            "ad": true
        }, {
            "id": 1009,
            "cid": 2,
            "start": "2015-04-05T13:00:00-07:00",
            "end": "2015-04-05T18:00:00-07:00",
            "title": "Board meeting",
            "loc": "ABC Inc.",
            "rem": 60
        }, {
            "id": 1010,
            "cid": 3,
            "start": "2015-04-05T00:00:00-07:00",
            "end": "2015-04-09T23:59:59-07:00",
            "title": "Jenny's final exams",
            "ad": true
        }, {
            "id": 1011,
            "cid": 1,
            "start": "2015-04-09T19:00:00-07:00",
            "end": "2015-04-09T23:00:00-07:00",
            "title": "Movie night",
            "note": "Don't forget the tickets!",
            "rem": 60
        }]
}

问题是你的日期格式，希望这对你有帮助，祝你好运'