PDA

View Full Version : data[M.StartDate.name] is null error using calendar



rushi2440
13 Mar 2012, 4:21 AM
hi sencha forum member

I am trying to implement http://ext.ensible.com/deploy/dev/examples/calendar/remote/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
13 Mar 2012, 5:57 AM
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
14 Mar 2012, 3:55 AM
@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