data[M.StartDate.name] is null error using calendar

[rushi2440]

hi sencha forum member

I am trying to implement http://ext.ensible.com/deploy/dev/ex...te/remote.html calendar to my application. I had created my view with the below code

Ext.require([
             'Ext.data.proxy.Rest',
             'Extensible.calendar.data.MemoryCalendarStore',
             'Extensible.calendar.data.EventStore',
             'Extensible.calendar.CalendarPanel'
         ]);


Ext.onReady(function(){


    var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'data/calendars.json',
            noCache: false,
            
            reader: {
                type: 'json',
                root: 'calendars'
            }
        }
    });
    
    var eventStore = Ext.create('Extensible.calendar.data.EventStore', {
        autoLoad: true,
        proxy: {
        type: 'ajax',
        api: {
                read: 'calendar/GetCalendar.action',
                create: 'calendar/CreateCalendar.action',
                update: 'calendar/UpdateCalendar.action',
                destroy: 'calendar/DeleteCalendar.action'
            },
            
            reader: new Ext.data.JsonReader({
                totalProperty: 'total',
                successProperty: 'success',
                type: 'json',
                root: 'calendardata'
            }),
            
            writer: new Ext.data.JsonWriter({
                root: 'calendardata',
                encode: true,
                writeAllFields: true
            }),
            
            listeners: {
                exception: function(proxy, response, operation, options){
                    var msg = response.message ? response.message : Ext.decode(response.responseText).message;
                    // ideally an app would provide a less intrusive message display
                    Ext.Msg.alert('Server Error', msg);
                }
            }
        },


        // It's easy to provide generic CRUD messaging without having to handle events on every individual view.
        // Note that while the store provides individual add, update and remove events, those fire BEFORE the
        // remote transaction returns from the server -- they only signify that records were added to the store,
        // NOT that your changes were actually persisted correctly in the back end. The 'write' event is the best
        // 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': 
                        Ext.Msg.alert('Add', 'Added "' + title + '"');
                        break;
                    case 'update':
                        Ext.Msg.alert('Update', 'Updated "' + title + '"');
                        break;
                    case 'destroy':
                        Ext.Msg.alert('Delete', 'Deleted "' + title + '"');
                        break;
                }
            }
        }
    });
    
    var cp = Ext.create('Extensible.calendar.CalendarPanel', {
        id: 'calendar-remote',
        eventStore: eventStore,
        calendarStore: calendarStore,
        renderTo: 'cal',
        title: 'Remote Calendar',
        width: 900,
        height: 700
    });
    
    // You can optionally call load() here if you prefer instead of using the 
    // autoLoad config.  Note that as long as you call load AFTER the store
    // has been passed into the CalendarPanel the default start and end date parameters
    // will be set for you automatically (same thing with autoLoad:true).  However, if
    // you call load manually BEFORE the store has been passed into the CalendarPanel 
    // it will call the remote read method without any date parameters, which is most 
    // likely not what you'll want. 
    // store.load({ ... });
    
    var errorCheckbox = Ext.get('forceError');
     
    var setRemoteErrorMode = function(){
        if(errorCheckbox.dom.checked){
            // force an error response to test handling of CUD (not R) actions. this param is 
            // only implemented in the back end code for this sample -- it's not default behavior.
            eventStore.getProxy().extraParams['fail'] = true;
            cp.setTitle('Remote Calendar <span id="errTitle">(Currently in remote error mode)</span>');
        }
        else{
            delete eventStore.getProxy().extraParams['fail'];
            cp.setTitle('Remote Calendar');
        }
    };
    
    setRemoteErrorMode();
    errorCheckbox.on('click', setRemoteErrorMode);
});

when I create the new event all the data get persisted to my database successfully. But don't know why my view gives me error data[M.StartDate.name] is null .

please help me to find what there wrong in my code, so I can make changes and make I working.

I get the calendardata json response from server as

{"calendardata":[{"startdate":null,"calendarid":null,"enddate":null,"isallday":false,"id":1,"title":null},{"startdate":1330281000000,"calendarid":1,"enddate":1330281000000,"isallday":false,"id":2,"title":"mon"},{"startdate":1330281000000,"calendarid":1,"enddate":1330284600000,"isallday":false,"id":3,"title":"mon"}],"total":3,"success":true}

Yogendra Singh
Sr. Programmer
Kintudesigns.com

[vietits]

I am not sure whether or not this could fix you error but you should check your data:
1. Your data contains a record with startdate/enddate have null value.
2. Two other records have startdate/enddate with value in miliseconds, so make sure you've defined these date fields with dateFormat set to 'time'.

var data = {
    "calendardata":[{
        "startdate":null,
        "calendarid":null,
        "enddate":null,
        "isallday":false,
        "id":1,
        "title":null
    },{
        "startdate":1330281000000, 
        "calendarid":1,
        "enddate":1330281000000,
        "isallday":false,
        "id":2,
        "title":"mon"
    },{
        "startdate":1330281000000,
        "calendarid":1,
        "enddate":1330284600000,
        "isallday":false,
        "id":3,
        "title":"mon"
    }],
    "total":3,
    "success":true
};

[rushi2440]

@vietits

thanks for your reply, now my data[M.StartDate.name] get solved correctly.

But again when I am converting my example to MVC architecture it gives me error config is undefined

my view calendarPanel is

Ext.define('gantt.view.calendarmgt.calendarPanel', {
    extend: 'Extensible.calendar.CalendarPanel',
    alias: 'widget.calendarpanelmain',
    requires: [
                'Ext.data.proxy.Rest',
                'Extensible.calendar.data.MemoryCalendarStore',
                'Extensible.calendar.data.EventStore',
                'Extensible.calendar.CalendarPanel'
               ],
   title: 'Remote Calendar',
    width: 900,
    height: 700,
    
    initComponent: function() {
        var me = this;
        var calendarStore = Ext.create('gantt.store.calendarStore');
        var eventStore = Ext.create('gantt.store.eventStore');
        
        Ext.apply(me, {
            eventStore: eventStore,
            calendarStore: calendarStore
        });
        me.callParent(arguments);
    }
});

my calendarStore is

Ext.define('gantt.store.calendarStore', {
    extend: 'Extensible.calendar.data.MemoryCalendarStore',
     autoLoad: true,
     proxy: {
         type: 'ajax',
         url: 'http://localhost:8080/Gantt/data/calendars.json',
         noCache: false,
         
         reader: {
             type: 'json',
             root: 'calendars'
         }
     }
});

my eventStore is

Ext.define('gantt.store.eventStore', {
    extend : 'Extensible.calendar.data.EventStore',


    autoLoad: true,
    proxy: {
    type: 'ajax',
    api: {
            read: 'http://localhost:8080/Gantt/calendar/GetCalendar.action',
            create: 'http://localhost:8080/Gantt/calendar/CreateCalendar.action',
            update: 'http://localhost:8080/Gantt/calendar/UpdateCalendar.action',
            destroy: 'http://localhost:8080/Gantt/calendar/DeleteCalendar.action'
        },
        
        reader: new Ext.data.JsonReader({
            totalProperty: 'total',
            successProperty: 'success',
            type: 'json',
            root: 'calendardata'
        }),
        
        writer: new Ext.data.JsonWriter({
            root: 'calendardata',
            encode: true,
            writeAllFields: true
        }),
        
        listeners: {
            exception: function(proxy, response, operation, options){
                var msg = response.message ? response.message : Ext.decode(response.responseText).message;
                // ideally an app would provide a less intrusive message display
                Ext.Msg.alert('Server Error', msg);
            }
        }
    },


    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': 
                    Ext.Msg.alert('Add', 'Added "' + title + '"');
                    break;
                case 'update':
                    Ext.Msg.alert('Update', 'Updated "' + title + '"');
                    break;
                case 'destroy':
                    Ext.Msg.alert('Delete', 'Deleted "' + title + '"');
                    break;
            }
        }
    }
});

it gives me error config is undefined in EventStore.js code is given below

Ext.define('Extensible.calendar.data.EventStore', {
    extend: 'Ext.data.Store',
    model: 'Extensible.calendar.data.EventModel',
    
    constructor: function(config){
        
        this.callParent(arguments);
    },
    
    load : function(o){
        Extensible.log('store load');
        o = o || {};


        if(o.params){
            delete this.initialParams;
        }


        if(this.initialParams){
            o.params = o.params || {};
            Ext.apply(o.params, this.initialParams);
            delete this.initialParams;
        }
        
        this.callParent(arguments);
    }
    


});

i am just converting my working example to MVC architechture, still it gives me config is undefined error

my working example code is given below

Ext.require([
             'Ext.data.proxy.Rest',
             'Extensible.calendar.data.MemoryCalendarStore',
             'Extensible.calendar.data.EventStore',
             'Extensible.calendar.CalendarPanel'
         ]);


Ext.onReady(function(){


    var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'data/calendars.json',
            noCache: false,
            
            reader: {
                type: 'json',
                root: 'calendars'
            }
        }
    });
    
    var eventStore = Ext.create('Extensible.calendar.data.EventStore', {
        autoLoad: true,
        proxy: {
        type: 'ajax',
        api: {
                read: 'calendar/GetCalendar.action',
                create: 'calendar/CreateCalendar.action',
                update: 'calendar/UpdateCalendar.action',
                destroy: 'calendar/DeleteCalendar.action'
            },
            
            reader: new Ext.data.JsonReader({
                totalProperty: 'total',
                successProperty: 'success',
                type: 'json',
                root: 'calendardata'
            }),
            
            writer: new Ext.data.JsonWriter({
                root: 'calendardata',
                encode: true,
                writeAllFields: true
            }),
            
            listeners: {
                exception: function(proxy, response, operation, options){
                    var msg = response.message ? response.message : Ext.decode(response.responseText).message;
                    Ext.Msg.alert('Server Error', msg);
                }
            }
        },


        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': 
                        Ext.Msg.alert('Add', 'Added "' + title + '"');
                        break;
                    case 'update':
                        Ext.Msg.alert('Update', 'Updated "' + title + '"');
                        break;
                    case 'destroy':
                        Ext.Msg.alert('Delete', 'Deleted "' + title + '"');
                        break;
                }
            }
        }
    });
    
    var cp = Ext.create('Extensible.calendar.CalendarPanel', {
        id: 'calendar-remote',
        eventStore: eventStore,
        calendarStore: calendarStore,
        renderTo: 'cal',
        title: 'Remote Calendar',
        width: 900,
        height: 700
    });
    
   
});

please help me to find what there wrong in my code, so I can make changes and make I working.

Yogendra Singh
Sr. Programmer
Kintudesigns.com