Databases
StackOverflow2013
Postsdbo
POHow to customise extjs remote extensible calendar example with MVC application?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to customise extjs remote extensible calendar example with MVC application?
    text
    copied!<p>I have downloaded 'extensible-1.6.0-b1', I'm trying to understand the remote example to customise it with my application. I'm coding with extjs 4.0.7.<br> I want to know how to intgrate the example in mvc application? Is there an example with clear architecture: store+model+controller?<br> <strong>Edit:</strong><br> This is the code I'm using now: </p> <pre><code>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(); } }); </code></pre> <p>The json returned: </p> <pre><code>{ "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":"" }] } </code></pre> <p>But events are not displayed in the calendar, and I have this error in Firebug: </p> <pre><code>TypeError: data[M.StartDate.name] is null </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload